How I migrated React Storybook from v5.3 to v6

If you get to this article its because you are already familiar with Storybook and you want to move forward to the new and cool stuff :).
I will give you my simple old configuration and tell you my adventure of updating from v5.3 to v6.

Note: I think it should work for v5 also as I didn't change my Storybook config on updates to v5.3.

Well, my configuration for the v5.3 was:

// .storybook/config.js

import {addParameters} from '@storybook/react';
import '../src/styles/App.scss'; // all my app styles because I don't import them in each component
import './styles.scss'; // with some overrided styles for Storyb
import theme from './theme';

addParameters({
  options: {theme}
});

// .storybook/main.js

module.exports = {
  stories: ['../src/components/**/*.stories.js'],
};

// .storybook/theme.js

import {create} from '@storybook/theming';
import gigedsLogo from '../src/statics/logo.png';

export default create({
  base: 'light',
  brandTitle: 'Gigeds',
  brandImage: gigedsLogo,
  colorSecondary: '#de2020'
});

// .storybook/webpack.config.js

const path = require('path');

function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
      },
      {
        test: /\.(jpg|jpeg|png|svg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              limit: 1000000,
              name: `statics/images/[name].[ext]`,
            },
          },
        ],
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'file-loader',
        options: {
          limit: 10000,
          name: `statics/fonts/[name].[ext]`,
        },
      },
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json', '.css', '.scss'],
    modules: [resolve('../node_modules')],
    alias: {
      components: resolve('../src/components'),
      views: resolve('../src/views'),
      statics: resolve('../src/statics'),
    },
  },
};

As you can see the configuration is very simple, without plugins and with some changes in the theme and custom Webpack configuration.
Imagine you have your Storybook working fine and you just updated it from v5.3 to v6, then run a script yarn sb (in your case could be yarn storybook) to check if everything works as expected... compiling... and BAM!

ERR! Error: You have both a "main" and a "config". Please remove the "config" file from your configDir

Hm... if I remove my config I need to load my styles and my custom theme somewhere 😕. Well, let's remove our config.js and go to the documentation to see how to fix it.
Let's go to theme configuration documentation. Bingo! Install a couple of new packages yarn add --dev @storybook/addons @storybook/theming
Then create ./manager.js to load your custom theme 💪

// ./manager.js
@see https://storybook.js.org/docs/react/configure/theming#create-a-theme-quickstart

import { addons } from '@storybook/addons';
import { themes } from '@storybook/theming';

addons.setConfig({
  theme: themes.dark,
});

NOTE: at the beginning I just copied and pasted all the stuff I had in my ./config.js and then ran yarn sb and got an error:

ERROR in ./src/styles/App.scss 2:0
Module parse failed: Unexpected character '@' (2:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

It was because I was importing App.scss file which is not needed anymore in v6.

So, here we go again, run yarn sb and...😏 BAM! Bloody terminal😨

A lot of errors, one per `.jsx` file which has `.scss` import.

My thought was to add webpack config somewhere. After a nice while of diving in the documentation I found custom webpack configuration which is pretty clear, but then I got a doubt to where to load all the stories, and the documentation doesn't mention anything about stories loading + webpack config at the same time. They are always treated separately. So I just added them in the same module.

// ./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,
      },
      resolve: {
        ...config.resolve,
        ...custom.resolve,
      }
    };
  },
};

Then run yarn sb and... BOOM? (BAM! = bad, BOOM! = cool) The browser opened, Storybook loading... loading... loading... 😕 we are still missing something... Let's check the terminal. Oh! A lot of warnings (one per component):

...
WARNING in ./src/components/alert/Alert.stories.js 10:4
Module parse failed: Unexpected token (10:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
...

Seems like babel-loader is missing in our webpack config, which in my case with Storybook v5.3 was not needed, so let's add it.

// .storybook/webpack.config.js

const path = require('path');

function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  module: {
    rules: [
      ...
      {
         test: /\.(js|jsx)$/,
         exclude: /node_modules/,
         use: [
           'babel-loader',
             {
               loader: 'eslint-loader',
               options: {
                 cache: true,
                 emitWarning: true,
               },
             },
         ],
      },
...

Now again run sb, compiling... the browser opened... Storybook loading... loading... BOOM!💓 We got it! Storybook loaded with all the components 🎉 Easy ha? 😉

Summary

If you have the same configuration as me then:

1. remove config.js
2. create manager.js to load your theme
3. in your main.js load stories and webpack configuration
4. add babel-loader to your webpack configuration

More info: Migration documentation and Storybook configuration

Thanks for reading, comments are welcome.

Image by Antonios Ntoumas from Pixabay