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.