Storybook v6 zero-config for custom Webpack configuration

Hi everybody, this article is for those who are using a custom Webpack configuration to compile Storybook 6 and want to generate component's documentation automatically.

After the migration of Storybook v5.3 to Storybook v6 (Check the guide) I started the investigation of new features which are awesome. The coolest one from my point of view is @storybook/addon-essentials which adds a viewport button and support for an auto-documentation generation among other things.

In case you haven't read the article I mentioned before, I have a custom Webpack configuration which has taken me to the problem I got with the zero-config.

Let's start, our current configuration is:

// .storybook/main.js
const custom = require('./webpack.config.js');

module.exports = {
  stories: ['../src/components/**/*.stories.js'],
  webpackFinal: (config) => {
    return {
      ...config,
      module: {
        ...config.module,
        rules: custom.module.rules, // babel, sass, fonts and images loaders
      },
      resolve: {
        ...config.resolve,
        ...custom.resolve, // custom imports resolvers
      }
    };
  },
};

Now we need to install a couple of packages:

• @storybook/addon-essentials - cool storybook's addons collection
• babel-plugin-react-docgen - allows us to write a propType and component documentation

Run yarn add -D @storybook/addon-essentials babel-plugin-react-docgen.
Update your Storybook config file to:

// .storybook/main.js
const custom = require('./webpack.config.js');

module.exports = {
  stories: ['../src/components/**/*.stories.js'],
  addons: [
    '@storybook/addon-essentials',
  ],
  webpackFinal: (config) => {
    return {
      ...config,
      module: {
        ...config.module,
        rules: custom.module.rules,
      },
      resolve: {
        ...config.resolve,
        ...custom.resolve,
      }
    };
  },
};

Update your .babelrc config to:

{
  "presets": [
    [
      "@babel/preset-env",
      {"modules": "commonjs"}
    ],
    "@babel/react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-optional-chaining",
    "react-docgen"
  ]
}

Super easy when you know what you have to do. I decided to publish it because in my case I spent an entire afternoon looking for a solution and trying a lot of things which had no success. Then I used @storybook/preset-create-react-app which worked but I wanted to make it work with my own Webpack config, so a few days after I back to business and made it work.

Hope this article helps you, happy coding, and never give up 💪
Thanks for reading, comments are welcome :)

Thanks Michail Vasilyev for the picture.