Setting Up Storybook with TypeScript in Create React App

Ryan Teodoro — Sat, 14 Dec 2019 20:15:55 +0000

Out of the box, you can't write stories using TypeScript within a CRA generated application since the webpack config is only setup to process regular .js and .jsx files. Not to worry! We're going to fix that by creating our own webpack config where we'll specify the additional things in order to get it working with our TypeScript components.

Step 1

The first thing you'll have to do is install a TypeScript loader. For this tutorial, I've chosen awesome-typescript-loader as it was recommended on the Storybook website. Note: This package should be saved as a dev dependency, which we can do by adding the -D flag.

  yarn add -D awesome-typescript-loader

This will allow us to process TypeScript files in our story files.

Step 2

Once you've got this dependency installed, you'll need to configure the actual webpack config. To do this, we'll need to create a separate file in order to configure our build server within the .storybook directory.

// .storybook/webpack.config.js
module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: require.resolve('awesome-typescript-loader'),
      },
    ],
  });
  config.resolve.extensions.push('.ts', '.tsx');
  return config;
};

Here we're informing webpack that it should use the awesome-typescript-loader whenever it encounters a .ts or .tsx file, something that it didn't know what to do with before.

Step 3

We're almost done! Next up, I updated the Storybook config file extension to .ts and updated the imported file extensions from .jsx to .tsx. Note: The ? character is a regex expression that marks the preceding character as optional -- this allows us to include both .ts and .tsx in a shorthanded manner.

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

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

And that's it! Now, we can write stories by importing our TypeScript React components.

DEV Community: Ryan Teodoro

Setting Up Storybook with TypeScript in Create React App

Step 1

Step 2

Step 3