presets: preset-typescript does not work according to instructions

I have a clean setup for storybook/react: npx -p @storybook/cli sb init --type react I added preset-typescript to new presets.js file like that module.exports = ['@storybook/preset-typescript']; and dependencies npm i -D @storybook/preset-typescript react-docgen-typescript-loader ts-loader

Now I have quite a simple basic configuration:

/*.storybook/config.js*/
import { configure } from '@storybook/react';

// automatically import all files ending in *.stories.js
configure(require.context('../stories', true, /\.stories\.ts$/), module);

/*.storybook/presets.js*/
module.exports = ['@storybook/preset-typescript'];

/*.storybook/addons.js*/
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';

/*stories/0-Welcome.stories.ts*/

import React from 'react';
import { linkTo } from '@storybook/addon-links';
import { Welcome } from '@storybook/react/demo';

export default {
  title: 'Welcome',
};

export const toStorybook = () => <Welcome showApp={linkTo('Button')} />;

toStorybook.story = {
  name: 'to Storybook',
};

And instruction says that’s it, but: Screenshot 2019-11-22 at 14 06 33

So how does it work?

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 7
Comments: 17 (5 by maintainers)

Most upvoted comments

It looks to me like the problem is with the underlying webpack config. Running npx start-storybook --debug-webpack when presets.js only has module.exports = ["@storybook/preset-typescript"]; produces the following:

// ...
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: '/Users/joe/Projects/test/node_modules/ts-loader/index.js',
            options: { transpileOnly: true }
          },
          {
            loader: '/Users/joe/Projects/test/node_modules/react-docgen-typescript-loader/dist/index.js',
            options: {}
          }
        ],
        include: []
      },
// ...

Notice the empty include array. But, if you change presets.js such that include is specified…

const path = require("path");

module.exports = [
  {
    name: "@storybook/preset-typescript",
    options: {
      include: [
        path.resolve(__dirname, "../src"),
        path.resolve(__dirname, "../stories")
      ]
    }
  }
];

… everything works as expected and the relevant portion of the webpack config has the correct include directive:

// ...
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: '/Users/joe/Projects/test/node_modules/ts-loader/index.js',
            options: { transpileOnly: true }
          },
          {
            loader: '/Users/joe/Projects/test/node_modules/react-docgen-typescript-loader/dist/index.js',
            options: {}
          }
        ],
        include: [
          '/Users/joe/Projects/test/src',
          '/Users/joe/Projects/test/stories'
        ]
      },
// ...

Just for the sake of comparison, I checked the generated webpack config in a CRA project and found that it’s using this:

// ...
        test: /\.(js|mjs|jsx|ts|tsx)$/,
        include: [
          '/Users/joe/Projects/cra-test/src',
          '/Users/joe/Projects/cra-test/.storybook'
        ],
// ...

I’m not sure why the include array is empty when the directions for installing this preset are followed as published, but I’m reasonably sure that’s the issue.

+20

wollardj on Dec 28, 2019

Trying to integrate Storybook as a part of a TSDX component library.

Steps I took:

npx -p @storybook/cli sb init --type react
yarn add -D @storybook/preset-typescript react-docgen-typescript-loader ts-loader fork-ts-checker-webpack-plugin
Convert .storybook/main.js to:

module.exports = {
  stories: ['../src/components/**/*.stories.(tsx|mdx)'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
  presets: ['@storybook/preset-typescript'],
};

Created the following Button.stories.tsx within src/components/Button/__stories__/:

import React from 'react';
import { action } from '@storybook/addon-actions';
import { Button } from '../';

export default {
  title: 'Button',
  component: Button,
};

export const WithRequiredProps = () => (
  <Button onClick={action('clicked')}>Click me!</Button>
);

After I run, yarn storybook, I get the following: Screen Shot 2020-01-19 at 5 13 05 PM

I ditched the preset and got everything working with this:

npx -p @storybook/cli sb init --type react
yarn add -D yarn add -D awesome-typescript-loader @storybook/addon-info react-docgen-typescript-loader
.storybook/main.js:

module.exports = {
  stories: ['../src/**/*.stories.(tsx|mdx)'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      use: [
        {
          loader: require.resolve('awesome-typescript-loader'),
        },
        {
          loader: require.resolve('react-docgen-typescript-loader'),
        },
      ],
    });

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

    return config;
  },
};

kylemh on Jan 20, 2020

This should be improved when v6 is released 🙏

kylemh on Jun 9, 2020

Hi have the same issue, however the tsconfig file did not work for me. We keep our stories in folders in with the component, would this make a difference? Below is a the error, looks like nothing is being transpiled using this preset. Screenshot 2019-12-20 at 11 41 09

daraclare on Dec 20, 2019

I was gonna create a fork and throw up a pull request for this, but it looks like that’s already being addressed by @T0MASD in #83 👍

wollardj on Dec 28, 2019

Bump. Me three.

tsconfig:

CallumJHays on Dec 27, 2019

I’m having the same issue, tried from scratch a few times, but having the same issue that @daraclare has.

thedaviddias on Dec 23, 2019