Storybook: Custom webpack config breaks storybook

[vass-david]

Hi. I'm trying trying to solve super-weird bug when custom config in my new project is breaking whole storybook. I've basically just copy-pasted whole storybook stuff from another project which is working perfectly. In this new project it's a problem. Deleting custom config makes storybook working again.

Storybook output:

➜ react-library-starter-kit (master) ✗ npm run start:storybook

> [email protected] start:storybook /Users/davidvass/Work/react-library-starter-kit
> start-storybook --dont-track -p 9001

Environment: production
=> Loading custom webpack config.

React Storybook started on => http://localhost:9001/

webpack built 17d12a0d8ee6b520b2b5 in 54ms
Hash: 17d12a0d8ee6b520b2b5
Version: webpack 1.13.2
Time: 54ms
                   Asset     Size  Chunks             Chunk Names
static/preview.bundle.js  23.1 kB       0  [emitted]  preview
static/manager.bundle.js  22.7 kB       1  [emitted]  manager
chunk    {0} static/preview.bundle.js (preview) 76 bytes [rendered]
    [0] multi preview 76 bytes {0} [built] [5 errors]
chunk    {1} static/manager.bundle.js (manager) 52 bytes [rendered]
    [0] multi manager 52 bytes {1} [built] [3 errors]

ERROR in multi manager
Module not found: Error: Cannot resolve 'file' or 'directory' /Users/davidvass/Work/react-library-starter-kit/node_modules/@kadira/storybook/dist/server/addons.js in /Users/davidvass/Work/react-library-starter-kit
 @ multi manager

ERROR in multi manager
Module not found: Error: Cannot resolve 'file' or 'directory' /Users/davidvass/Work/react-library-starter-kit/node_modules/@kadira/storybook/dist/server/config/polyfills.js in /Users/davidvass/Work/react-library-starter-kit
 @ multi manager

ERROR in multi preview
Module not found: Error: Cannot resolve 'file' or 'directory' /Users/davidvass/Work/react-library-starter-kit/node_modules/@kadira/storybook/dist/server/config/polyfills.js in /Users/davidvass/Work/react-library-starter-kit
 @ multi preview

ERROR in multi manager
Module not found: Error: Cannot resolve 'file' or 'directory' /Users/davidvass/Work/react-library-starter-kit/node_modules/@kadira/storybook/dist/client/manager/index.js in /Users/davidvass/Work/react-library-starter-kit
 @ multi manager

ERROR in multi preview
Module not found: Error: Cannot resolve 'file' or 'directory' /Users/davidvass/Work/react-library-starter-kit/node_modules/@kadira/storybook/dist/server/config/error_enhancements.js in /Users/davidvass/Work/react-library-starter-kit
 @ multi preview

ERROR in multi preview
Module not found: Error: Cannot resolve 'file' or 'directory' /Users/davidvass/Work/react-library-starter-kit/node_modules/@kadira/storybook/dist/server/config/globals.js in /Users/davidvass/Work/react-library-starter-kit
 @ multi preview

ERROR in multi preview
Module not found: Error: Cannot resolve 'file' or 'directory' /Users/davidvass/Work/react-library-starter-kit/node_modules/webpack-hot-middleware/client.js in /Users/davidvass/Work/react-library-starter-kit
 @ multi preview

ERROR in multi preview
Module not found: Error: Cannot resolve 'file' or 'directory' /Users/davidvass/Work/react-library-starter-kit/.storybook/config.js in /Users/davidvass/Work/react-library-starter-kit
 @ multi preview

Webpack configs:

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

module.exports = {
  resolve: mainWebpackConfig.resolve,

  module: {
    loaders: [
      ...mainWebpackConfig.module.loaders,
      {
        test: /\.(?:png|jpe?g|otf|gif|svg|woff2?|ttf|eot|ico)$/,
        loader: 'file-loader',
      },
    ]
  }
};

// /webpack.config.js
const path = require('path');
const packageJson = require('./package.json');
const args = require('yargs');
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');

const development = args.argv.env === 'development';
const libraryName = packageJson.name;
const rootPath = path.resolve(__dirname);
// eslint-disable-next-line
console.log(`Environment: ${development ? 'development' : 'production'}`); //

module.exports = {
  entry: path.join(__dirname, '/src/index.js'),

  output: {
    path: path.join(__dirname, '/umd'),
    filename: `${libraryName}.js`,
    library: libraryName,
    libraryTarget: 'umd',
    umdNamedDefine: true,
    auxiliaryComment: {
      // temporary brunch support
      // eslint-disable-next-line
      commonjs2: ` Brunch module definition follows:\n\tif(typeof require === "function" && typeof require.register === "function"){\n\t\trequire.register("${libraryName}", function(exports, require, module){ module.exports = factory(); });\n\t}`
    },
  },

  // generates source maps as a separate file
  devtool: 'source-map',


  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: [
            ['es2015', { modules: false }],
            'react',
          ],
          cacheDirectory: development,
          babelrc: false,
          plugins: [
            'transform-object-rest-spread',
          ],
        },
      },
    ],
  },

  plugins: [
    new LoaderOptionsPlugin({
      // switch loaders to debug mode
      debug: development,
      eslint: {
        cache: development,
        failOnError: !development,
      },
    }),
  ],

  resolve: {
    extensions: ['.js'],
    alias: {
      src: path.resolve(rootPath, 'src'),
    },
  },
};

npm ls: http://hastebin.com/akofavuruh.pl

Whole project: https://drive.google.com/a/showmax.com/file/d/0B_k3b24rVwCaSGtMZXFSeVB6WEk/view?usp=sharing

[arunoda]

You should try to keep our babel-loader. It's configured to load our JS files.

[vass-david]

I have thought that this config is used only for my code, not storybook code. So you suggest not using babel-loader at all in my config?

[arunoda]

@vass-david not that.
Storybook needs it's own code and we need to load it.
What I mean is, use our own version of babel-loader rather that using your version for storybook.
Just use your babel-loader for your app only.

[vass-david]

@arunoda I'm sorry but I'm confused now. I've installed [email protected] which is version in your package.json under devel dependencies and it does not work as well. How can I use your version of babel-loader in this .storybook/webpack.config.js? Do you export some special modified babel-loader version in storybook? Or do I need to set babel-loader config exactly same as your one?

[vass-david]

Any update here? Would be nice to be able to use custom webpack config here.

[derpoho]

@vass-david i solved this issue by copying my webpackConfig over to the custom config (it's similar to yours) and adding the steps per object key, like this:

const webpackConfig = require('../config/webpack/webpack.config')

module.exports = {
  context: webpackConfig.context,
  // plugins: webpackConfig.plugins,
  resolve: {
    extensions: ['', '.js', '.jsx', '.json', '.scss'],
    alias: webpackConfig.resolve.alias,
  },
  module: {
    loaders: webpackConfig.module.loaders,
  },
};

When trying this i found out that storybook seems to need an empty '' at the beginning of the extensions array. Once i added this in the custom config it worked.

You can't add it to your main config because it's invalid configuration (especially for webpack 2)

Also i had to add a custom .babelrc to the story book folder where i wrote 'es2015', instead of ['es2015', { modules: false }],

Hope this helps.

[vass-david]

@derpoho Man, thank you so much. Missing empty string extension was the thing.

[arunoda]

I hope we could close this.

[freakaziod210]

Is this still an issue? Do we actually need an empty string in the first index?

[donaldtf]

I have been trying to get storybooks to work with typescript using a similar method to this. If I include '' in my extensions list, however, I get the following error.

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.resolve.extensions[5] should not be empty.

Is this due to updates that have happened since these posts were made?