Storybook 4 + create-react-app 2 + Typescript: loader issue

Describe the bug I’m trying to setup a storybook using the guidelines here: https://storybook.js.org/configurations/typescript-config, but this doesn’t seem to be accurate (anymore).

To Reproduce

npx create-react-app my-app
yarn add -D typescript @types/node @types/react @types/react-dom @types/jest

Rename react files from .js to .ts/.tsx

npx -p @storybook/cli sb init
yarn add -D awesome-typescript-loader
yarn add -D @types/storybook__react
yarn add -D @storybook/addon-info react-docgen-typescript-webpack-plugin

Results in following depedencies:

{
  "dependencies": {
    "react": "^16.6.0",
    "react-dom": "^16.6.0",
    "react-scripts": "2.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.1.2",
    "@storybook/addon-actions": "^4.0.4",
    "@storybook/addon-info": "^4.0.4",
    "@storybook/addon-links": "^4.0.4",
    "@storybook/addons": "^4.0.4",
    "@storybook/react": "^4.0.4",
    "@types/jest": "^23.3.9",
    "@types/node": "^10.12.2",
    "@types/react": "^16.4.18",
    "@types/react-dom": "^16.0.9",
    "@types/storybook__react": "^3.0.9",
    "awesome-typescript-loader": "^5.2.1",
    "babel-loader": "^8.0.4",
    "react-docgen-typescript-webpack-plugin": "^1.1.0",
    "typescript": "^3.1.6"
  }
}

Copy tsconfig.json + .storybook/webpack.config.js from https://storybook.js.org/configurations/typescript-config/

Add simple button component:

// src/components/button/Button.tsx

import * as React from "react";

interface ButtonProps {
    label: string
}
export const Button: React.SFC<ButtonProps> = (props) => {
    return <button>{props.label}</button>;
}

Add Storybook config

// .storybook/config.ts

import { configure } from '@storybook/react';

const req = require.context('../src/stories', true, /\.tsx$/);

configure(() => {
  req.keys().forEach(filename => req(filename));
}, module);

Add story

// src/stories/index.tsx

import React from 'react';

import { storiesOf } from '@storybook/react';
import { Button } from '../components/button/Button';

const stories = storiesOf('Button', module);

stories.add(
    'test', 
    () => <Button>Test</Button>,
);

Expected behavior yarn storybook should mount a storybook with one story.

Screenshots

Code snippets I also had to remove "isolatedModules": true from tsconfig.json before I could get the storybook running.

System:

• OS: MacOS
• Browser: Chrome
• Framework: react
• Version: 4.0.4

Additional context Storybook 4 + create-react-app 2.1 without typescript enabled works like a charm 😃

[ibrambe]

@mohamedmansour this works like a charm indeed:

  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve('babel-loader'),
    options: {
        presets: [['react-app', { flow: false, typescript: true }]]
      }
  });

no need for awesome-typescript-loader anymore.

[ibrambe]

@vitalybe @igor-dv

Upgraded to storybook 4.0.6 and using this as webpack.config.js:

// .storybook/webpack.config.js

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin-alt');

module.exports = (baseConfig, env, config) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve('babel-loader'),
    options: {
        presets: [require.resolve('babel-preset-react-app')]
      }
  });

  config.resolve.extensions.push('.ts', '.tsx');

  config.plugins.push(
    new ForkTsCheckerWebpackPlugin({
        async: false,
        checkSyntacticErrors: true,
        formatter: require('react-dev-utils/typescriptFormatter'),
      }),
  );

  return config;
};

This works and has live type validation, it’s based on the config in react-scripts, so all dependencies are already loaded if you use CRA 2.