Search code examples
reactjstypescriptwebpackstorybook

Storybook - no stories showing up in typescript project with custom webpack / babel

I am trying to set up Storybook in a project. My project is runing on react@^16, and I'm using typescript, with a custom babel and webpack setup for development and build. To set up storybook, I did

npx sb init

This installs everything needed. It puts a .storybook folder in the root folder, and a stories folder in my src folder with some prefab components and stories in tsx format (which is what I want):

enter image description here

enter image description here

The .storybook/main.js file seems fine:

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ]
}

And the average .stories.js file automatically installed by npx sb init also seems fine:

import React from 'react';
// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
import { Story, Meta } from '@storybook/react/types-6-0';

import { Header, HeaderProps } from './Header';

export default {
  title: 'Example/Header',
  component: Header,
} as Meta;

const Template: Story<HeaderProps> = (args) => <Header {...args} />;

export const LoggedIn = Template.bind({});
LoggedIn.args = {
  user: {},
};

export const LoggedOut = Template.bind({});
LoggedOut.args = {};

But when I run npm run storybook, the storybook landing page has no stories. Even though it had installed some default stories to start playing with. It says:

Oh no! Your Storybook is empty. Possible reasons why:
The glob specified in main.js isn't correct.
No stories are defined in your story files.

As requested, here is a link to the repo so you can dig a bit deeper into the structure, weback config, etc. Note I have not committed the npx sb init changes yet, so you won't see the files there, only my starting point just before running the sb init.

I haven't had any issues getting npx sb init to work with a standard create-react-app, but with my custom webpack build and typescript, its just empty. What's going wrong?

Edit: Additional detail

I realize that just running npx sb init, then npm run storybook throws this error:

ERROR in ./.storybook/preview.js-generated-config-entry.js
Module not found: Error: Can't resolve 'core-js/modules/es.array.filter'

Based on this thread, installing core-js@3 solves the problem and storybook runs, though with no stories.

Solution

  • It seems like the babel plugin transform-es2015-modules-amd doesn't fit right with storybook since sb still uses your babel configuration.

    You might need to remove it then it would work:

    {
  "plugins": [
     // "transform-es2015-modules-amd", // Remove this plugin
   ]
}

    If you want to have a special babel configuration for storybook, place it .storybook/.babelrc so the configuration would be simple like this:

    .storybook/.babelrc:

    {
  "presets": ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"]
}

    NOTE: You might miss to forget install @babel/preset-typescript to help you transform your typescript code.