Storybook: Storybook seems to use other Webpack version than it requires (Webpack 4 over 3).

[ilyanoskov]

Bug summary

In my project I want to use Docz for documentation. Docz requires Webpack 4 to build itself. After installing docz, yarn build:storybook no longer works and I get this error:

info => Loading custom webpack config (full-control mode).
info Building storybook ...
/Users/ilyanoskov/Sumup/circuit-ui/node_modules/webpack/lib/DefinePlugin.js:93
                compiler.hooks.compilation.tap(
                               ^
TypeError: Cannot read property 'compilation' of undefined
    at DefinePlugin.apply (/Users/ilyanoskov/Sumup/circuit-ui/node_modules/webpack/lib/DefinePlugin.js:93:18)
    at Compiler.apply (/Users/ilyanoskov/Sumup/circuit-ui/node_modules/@storybook/core/node_modules/tapable/lib/Tapable.js:375:16)
    at webpack (/Users/ilyanoskov/Sumup/circuit-ui/node_modules/@storybook/core/node_modules/webpack/lib/webpack.js:33:19)
    at buildStatic (/Users/ilyanoskov/Sumup/circuit-ui/node_modules/@storybook/core/dist/server/build-static.js:107:40)
    at Object.<anonymous> (/Users/ilyanoskov/Sumup/circuit-ui/node_modules/@storybook/react/dist/server/build.js:23:25)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/ilyanoskov/Sumup/circuit-ui/node_modules/@storybook/react/bin/build.js:3:1)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)

Steps to reproduce

Any project that uses storybook would probably fit here. Then installing Docz and trying to build storybook will break the build process.

Please specify which version of Storybook and optionally any affected addons that you're running

• @storybook/react 3.4.0

[igor-dv]

You can upgrade to the latest alpha version of Storybook to be compatible with webpack v4.
Or did you want to have Storybook working with webpack v3 while Docz with webpack v4?

[ilyanoskov]

@igor-dv yes, is it possible so that Storybook uses its own version of webpack while docz uses its own?

[igor-dv]

Can you share your custom .storybook/webpack.config.js ?

[ilyanoskov]

here it is. thanks so much for taking time to help me out, I really appreciate it!

@igor-dv
https://github.com/sumup/circuit-ui/blob/88711ff7b65864d5f9150c556e19b8d88591947c/.storybook/webpack.config.js

const path = require('path');
const webpack = require('webpack');

const merge = require('webpack-merge');

module.exports = function(storybookBaseConfig, configType) {
  const isProduction = configType === 'PRODUCTION';

  const ourConfig = {
    externals: {
      jsdom: 'window',
      cheerio: 'window',
      'react/lib/ExecutionEnvironment': true,
      'react/lib/ReactContext': 'window',
      'react/addons': true
    },
    module: {
      rules: [
        {
          test: /\.story\.jsx?$/,
          loaders: [
            'babel-loader',
            {
              loader: require.resolve('@storybook/addon-storysource/loader'),
              options: {
                prettierConfig: {
                  parser: 'babylon'
                }
              }
            }
          ],
          enforce: 'pre'
        },
        {
          test: /\.svg$/,
          use: [
            { loader: 'babel-loader' },
            {
              loader: 'react-svg-loader',
              options: {
                es5: true
              }
            }
          ]
        }
      ]
    },
    plugins: [
      new webpack.DefinePlugin({
        STORYBOOK: JSON.stringify(true),
        PRODUCTION: JSON.stringify(isProduction)
      })
    ]
  };

  const ourProdSpecificConfig = {
    module: {
      rules: [
        {
          test: /\.css$/,
          loaders: ['style-loader', 'css-loader'],
          include: path.resolve(__dirname)
        }
      ]
    }
  };

  const baseConfig = merge(storybookBaseConfig, ourConfig);
  return isProduction ? merge(baseConfig, ourProdSpecificConfig) : baseConfig;
};

[igor-dv]

I think here

const webpack = require('webpack');

It's resolved to the v4. Try to change this to the pass of webpack that is used in storybook... It might be something like:

const webpack = require('@storybook/react/node_modules/webpack');

[ilyanoskov]

@igor-dv that's right! it worked :) thank you very much!!!

[airtonix]

I get this error even without a custom webpack.config.js.

[codejamninja]

Same, I think the internal storybook webpack config is resolving to the wrong place. How can we resolve it to the v3 webpack.

[xujianshe]

Same, I think the internal storybook webpack config is resolving to the wrong place. How can we resolve it to the v3 webpack.

i think you are right, Is there any further research?