Webpack 2 config not working loading modules.

[ssylvia]

I'm attempting to use react-storybook to read my project's original webpack config which uses Webpack 2 syntax. Under the storybook directory, I've add a webpack.config.js file with the following:

module.exports = require('../../../webpack.config')();

When storybook first runs, I get:

@kadira/storybook v2.34.0

=> Loading custom .babelrc
=> Loading custom addons config.
=> Loading custom webpack config.

then eventually:

Module parse failed: /Users/../../style.scss Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

It looks as though react-storybook does not handle the webpack 2 config appropriately.

The webpack module config is:

module: {
      rules: [
        {
          include: [
            path.resolve(__dirname, './src'),
          ],
          test: /\.(js|jsx)$/,
          use: [
            {
              loader: 'babel-loader',
              options: {
                cacheDirectory: true,
              },
            },
          ],
        },
        {
          enforce: 'pre',
          exclude: /\.(stories|test)\.(js|jsx)$/,
          include: [
            path.resolve(__dirname, './src'),
          ],
          test: /\.(js|jsx)$/,
          use: [
            {
              loader: 'babel-istanbul-loader',
              options: {
                cacheDirectory: true,
              },
            },
          ],
        },
        {
          include: [
            path.resolve(__dirname, './node_modules'),
          ],
          test: /\.(css)$/,
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true,
              },
            },
            {
              loader: 'postcss-loader',
            },
          ],
        },
        {
          include: [
            path.resolve(__dirname, './src'),
            path.resolve(__dirname, './node_modules/calcite-web/dist/'),
          ],
          test: /\.(scss)$/,
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true,
              },
            },
            {
              loader: 'postcss-loader',
            },
            {
              loader: 'sass-loader',
              options: {
                outputStyle: 'expanded',
                sourceMap: true,
                sourceMapContents: true,
              },
            },
          ],
        },
        {
          include: [path.resolve(__dirname, './src')],
          test: /\.(eot|gif|ico|svg|ttf|woff|woff2)$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                context: path.resolve(__dirname, './src'),
                limit: 10000,
                name: '[path][name].[ext]',
              },
            },
          ],
        },
        // Special loader for Calcite Web to make paths is dist/ pretty.
        {
          include: [path.resolve(__dirname, './node_modules/calcite-web/dist')],
          test: /\.(eot|gif|svg|ttf|woff|woff2)$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                context: path.resolve(__dirname, './node_modules/calcite-web/dist'),
                limit: 10000,
                name: 'resources/calcite-web/[path][name].[ext]',
              },
            },
          ],
        },
      ],
    },

[arunoda]

It's not supported yet.
See: #556

[terrierscript]

FYI:
I got same issue and create downgrade-webpack-loader-config for solved this.
It solved this issue in my case (but it's workaround).

This package may resolve same issue.

const downgrade = require('downgrade-webpack-loader-config')
const webpack2Conf = require('../webpack.config') // webpack v2 config
const v1LoaderConf = downgrade(webpack2Conf.module.rules)

// webpack v1 compatible config
module.exports = {
  module: v1LoaderConf,
}

[aray12]

Is there timeline on using webpack 2? I am in the process of upgrading to webpack 2 and the only outstanding thing is react-storybook. The problem I am having is I changed my .babelrc to allow webpack handle import statements

"presets": [
    ["es2015", { "modules": false }],
    "react"
  ],

But this is not playing nice with react-storybook

[erikthedeveloper]

@aray12 I just ran into this while upgrading to Webpack 2.x after setting the {"modules": false} option on the es2015 preset (to enable tree shaking). Luckily, Storybook allows you to add a .storybook/.babelrc so you can re-enable the default ({"modules": "commonjs"}).

See docs:

• https://babeljs.io/docs/plugins/preset-es2015/#options
• https://getstorybook.io/docs/react-storybook/configurations/custom-babel-config

For example, here is my project .babelrc w/ modules set to false (breaks Storybook)

{
  "presets": [
    ["es2015", {"modules": false}],
    "react"
  ]
}

and adding this .babelrc to the .storybook/ directory fixed the issue for me:

{
  "presets": [
    ["es2015", {"modules": "commonjs"}],
    "react"
  ]
}

📝 I ran into similar issues with not being able to run mocha tests due to ES6 modules no longer being transpiled and I had to take similar action to fix that.

📝 Babel also enables environment specific config via .babelrc: https://babeljs.io/docs/usage/babelrc/#env-option

[aray12]

@erikthedeveloper Thanks! I haven't tried it out yet but it is good to know that storybook overwrites the <root>/.babelrc with the <root>/.storybook/.babelrc

[arunoda]

Thanks @erikthedeveloper I'm planning to migrate Storybook to Webpack2 this week or next.
This info is helpful.

[sag1v]

still no support for webpack 2?