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

user_12010984 0
Viewed 18435

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.

storybook webpack typescript reactjs
4 Answers

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.

user_31042260

Maybe you have problems with the stories path, try to save only "../src/**/*.stories.js" in your config to see if its the reason

  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ]
user_146320140

In case of dealing with arcgis-js-api in sb, you have to declare @arcgis/webpack-plugin in storybook's webpack configuration by adding to its config.

Here are a few steps you have to do:

  • Add webpackFinal property in .storybook/main.js with following content:
const ArcGISPlugin = require('@arcgis/webpack-plugin');

module.exports = {
    // ...
    webpackFinal: (config) => {
        // Add your plugin
        config.plugins.push(
            new ArcGISPlugin(),
        );
        
        // Since this package has used some node's API so you might have to stop using it as client side
        config.node = {
            ...config.node,
            process: false,
            fs: "empty"
        };

        return config;
    }
};
  • One more thing to be aware of, some components are importing scss files, so you might need to support it by adding a scss addon '@storybook/preset-scss'
// Install
npm i -D  @storybook/preset-scss css-loader sass-loader style-loader


// Add to your current addons
{
  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/preset-scss'],
}
user_31042260

Like a tmhao2005 say. Storybook still uses your babel configuration. And this is the intended behavior. This thread at github also describes how the fix similar issue.

Updated your config .storybook/main.js.

If you use .babelrc:

babel: async options => ({ ...options, babelrc: false })

Or .babel.config.js:

babel: async options => ({ ...options, configFile: false })
user_98891320
Related