Storybook: Migration to Storybook 5. Custom webpack config

[mercury-oe]

Hi guys!
I'm trying to migrate my Storybook library from 4.x to 5.0.1.

I'm using my custom webpack config.
In Storybook 4 all works fine, but in storybook 5 all crashes when i'm using same webpack config.

In console after yarn storybook i see this errors types for every css files

ERROR in ./src/helpers/InfoTable/InfoTable.css (./node_modules/@storybook/core/node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/postcss-loader/src??postcss!./node_modules/style-loader!./node_modules/css-loader/dist/cjs.js??ref--10-1!./node_modules/postcss-loader/src??postcss!./src/helpers/InfoTable/InfoTable.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError

(2:1) Unknown word

  1 | 
> 2 | var content = require("!!../../../node_modules/css-loader/dist/cjs.js??ref--10-1!../../../node_modules/postcss-loader/src/index.js??postcss!./InfoTable.css");
    | ^
  3 | 
  4 | if(typeof content === 'string') content = [[module.id, content, '']];

 @ ./src/helpers/InfoTable/InfoTable.css 2:14-344 21:1-42:3 22:19-349
 @ ./src/helpers/InfoTable/InfoTable.js
 @ ./src/helpers/InfoTable/index.js
 @ ./tools/storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./tools/storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true

My custom webpack config

Storybook 4 webpack.config.js

const merge = require('webpack-merge');
const cssLoader = require('../modules/css').cssDevLoader;

module.exports = merge(cssLoader())

Storybook 5 webpack.config.js

const merge = require('webpack-merge');
const cssLoader = require('../modules/css').cssDevLoader;

module.exports = merge(cssLoader())

// and i tried this way
module.exports = ({ config }) => merge(config, cssLoader());

loader config
'css.js'

const postCssLoader = ({ sourceMap, minimize } = { sourceMap: false, minimize: false }) => {
  const plugins = [nested(), reporter(), fontSmoothing()];

  if (minimize) {
    plugins.push(cssnano({ preset: ['default', { normalizeUrl: false }] }));
    plugins.push(autoprefixer({ browsers: config.autoprefixerBrowserList }));
  }

  return {
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      postcss: {},
      sourceMap,
      plugins: () => [...plugins],
    },
  };
};

const cssLoader = ({ sourceMap = false } = { sourceMap: false }) => ({
  loader: 'css-loader',
  options: {
    modules: false,
    importLoaders: 1,
    localIdentName: '[path][name]__[local]--[hash:base64:8]',
    sourceMap,
  },
});

const cssDevLoader = () => ({
  module: {
    rules: [
      {
        test: /\.(css)$/,
        include: [config.paths.src.base, /node_modules/],
        use: [
          'style-loader',
          cssLoader({ sourceMap: true }),
          postCssLoader({ sourceMap: false, minimize: true }),
        ],
      },
    ],
  },
});

module.exports = {
  cssDevLoader,
};

* Storybook dependencies *

"@storybook/addon-info": "5.0.1",
 "@storybook/react": "5.0.1",
 "@storybook/theming": "5.0.1",

System:

• OS: MacOS Mojave 10.14.3
• Device: Macbook Pro early 2015
• Browser: chrome
• Framework: react
• Addons: [if relevant]
• Version: 5.0.1

[DeClaessens]

i am encountering the same issue.

[colinrobertbrooks]

Same issue here.

[chris-pearce]

Same issue here.

[astrotim]

Me too. I originally thought it was related to #5949 but the comments in this issue are exactly what I am experiencing.

[aach]

Same issue here.

[gburning]

So the answer is basically to not use extend mode then? @shilman

[shilman]

@gburning I've fixed it to unbreak people's migration from v4. But I've also deprecated it because I think it's basically a bad idea. Use full-control mode instead, even tho it requires you to understand more about what's going on.

[shilman]

Gadzooks!! I just released https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.7 containing PR #6104 that references this issue. Upgrade today to try it out!

Because it's a pre-release you can find it on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

@gburning @mercury-oe This release fixes "extend-mode". I'll patch it back into 5.0.x once a few people have verified it in their projects. Please LMK!

[mercury-oe]

I updated my storybook project to v5.1.0-alpha.7 and tried to use custom webpack config

config for extend mode

const merge = require('webpack-merge');
const cssLoader = require('../modules/css').cssDevLoader;

module.exports = merge(cssLoader());

config for full-control mode

const merge = require('webpack-merge');
const cssLoader = require('../modules/css').cssDevLoader;

module.exports = async ({ config }) => merge(config, cssLoader());

In extend mode al works fine, but in full-control mode I have the same errors. Maybe I'm using full-control mode incorrectly?

ERROR in ./src/helpers/InfoTable/InfoTable.css (./node_modules/@storybook/core/node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/postcss-loader/src??postcss!./node_modules/style-loader!./node_modules/css-loader/dist/cjs.js??ref--9-1!./node_modules/postcss-loader/src??ref--9-2!./src/helpers/InfoTable/InfoTable.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError

(2:1) Unknown word

  1 | 
> 2 | var content = require("!!../../../node_modules/css-loader/dist/cjs.js??ref--9-1!../../../node_modules/postcss-loader/src/index.js??ref--9-2!./InfoTable.css");
    | ^
  3 | 
  4 | if(typeof content === 'string') content = [[module.id, content, '']];

 @ ./src/helpers/InfoTable/InfoTable.css 2:14-344 21:1-42:3 22:19-349
 @ ./src/helpers/InfoTable/InfoTable.js
 @ ./src/helpers/InfoTable/index.js
 @ ./tools/storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./tools/storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true

[shilman]

@mercury-oe Glad to hear that extend mode works for you as expected.

As for full-control mode, you can see the final webpack config by passing --debug-webpack at the command line and looking at the output. You probably need to remove some rules from the default and then add in postcss-loader.

The difference between extend mode and full-control mode is that the config object you're merging with in full-control mode contains the default storybook rules and extend-mode does not.

[sushantdhiman]

This issue appears when project is using css-modules, by default storybook css rule looks like this

{
   loader: 'css-loader',
   options: {
       importLoaders: 1,
   }
}

This rule is present at 3rd index i.e. config.module.rules[2], you can either remove that rule entirely and add a new rule to compile css with modules:true OR modify it so options.modules = true

[callmephilip]

the solution that worked for me is here (just remove post-css from loaders ): https://github.com/storybooks/storybook/issues/6319#issuecomment-477852640

[EnjoyChan]

it works for me too

[liamsc]

@mercury-oe Glad to hear that extend mode works for you as expected.

As for full-control mode, you can see the final webpack config by passing --debug-webpack at the command line and looking at the output. You probably need to remove some rules from the default and then add in postcss-loader.

The difference between extend mode and full-control mode is that the config object you're merging with in full-control mode contains the default storybook rules and extend-mode does not.

@shilman there is no documentation of full-control vs. extend mode in the docs.

Could you add that documentation and provide explicit examples of custom vs extended webpack configuration?

Edit:
I did find some documentation here:
https://github.com/storybookjs/storybook/pull/6104/files#diff-177dcef0a5b481c2c87db87f7cdf200d

However, the configuration that is suggested in the docs I mentioned above will still trigger the deprecation warning.

[shilman]

@liamsc Extend mode has been deprecated a year ago. All current documentation should use full-control mode, which is the recommended way to configure webpack since 5.0

[liamsc]

@liamsc Extend mode has been deprecated a year ago. All current documentation should use full-control mode, which is the recommended way to configure webpack since 5.0

@shilman can you confirm that this documentation section uses full-control mode?
https://storybook.js.org/docs/configurations/custom-webpack-config/#using-your-existing-config

In addition, you will notice the documentation references "either" yet it only provides one option. Can this be clarified?

If you have an existing webpack config for your project and want to reuse this app’s configuration, you can either:

• Import your main webpack config into Storybook’s .storybook/main.js and merge the 2 configs.

[shilman]

@liamsc https://github.com/storybookjs/storybook/pull/9986

[liamsc]

@liamsc #9986

@shilman thanks, much appreciated!