Storybook: Migration to Storybook 4 issue with webpack config

[amittkSharma]

Hi Team,

During migration the storybook to new version 4.0.7, there is an issue in starting the storybook. Webpack is freaking out. The application is based on Create-React-App 1 and storybook has an extended webpack.config.js. There are two issues:

1. Failed to load presets
2. Cannot read property 'rules' of undefined (During the loading custom webpack config task)

The webpack config looks like:

const path = require("path")
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = (baseConfig, env, config) => {
  baseConfig.module.rules.push({
    test: /\.css$/,
    loaders: [
      'style-loader',
      'css-loader'
    ],
    include: path.resolve(__dirname, "../")
  });
  config.module.rules.push({
    test: /\.tsx?$/,
    loader: [
      'thread-loader',
      'ts-loader?happyPackMode=true',
      'react-docgen-typescript-loader'
    ]
  }, {
    test: /\.md$/,
    loader: [
      'thread-loader',
      'markdown-loader'
    ]
  })
  config.plugins.push(new ForkTsCheckerWebpackPlugin({
    checkSyntacticErrors: true,
    watch: path.resolve(__dirname, "../stories"),
    workers: ForkTsCheckerWebpackPlugin.TWO_CPUS_FREE,
  }))
  config.resolve.extensions.push(".ts", ".tsx")
  return config;
}

Waiting for some pointers from your side in order to rectify the problem.

Thanks in advance
Amit

[igor-dv]

So, I understand that before migration to v4 everything worked ok with this custom webpack.config.js? Can you also share some stack trace / error log?

[amittkSharma]

Yes, your understanding is correct, please find the error log below:

D:\workspace\source\packages\ProjectA>npm run storybook
info @storybook/react v4.0.7
info
info => Loading presets
WARN   Failed to load preset: "D:\\workspace\\source\\node_modules\\@storybook\\react\\node_modules\\@storybook\\core\\dist\\server\\core-preset-dev.js"
WARN   Failed to load preset: "D:\\workspace\\source\\node_modules\\@storybook\\react\\dist\\server\\framework-preset-cra-styles.js"
info => Loading custom webpack config (full-control mode).
ERR! TypeError: Cannot read property 'rules' of undefined
ERR!     at createDefaultWebpackConfig (D:\workspace\source\node_modules\@storybook\react\node_modules\@storybook\core\dist\server\config\webpack.config.default.js:15:45)
ERR!     at createFinalDefaultConfig (D:\workspace\source\node_modules\@storybook\react\node_modules\@storybook\core\dist\server\core-preset-webpack-custom.js:35:71)
ERR!     at Object.webpack (D:\workspace\source\node_modules\@storybook\react\node_modules\@storybook\core\dist\server\core-preset-webpack-custom.js:59:38)
ERR!     at process._tickCallback (internal/process/next_tick.js:68:7)
ERR!  { TypeError: Cannot read property 'rules' of undefined
ERR!     at createDefaultWebpackConfig (D:\workspace\source\node_modules\@storybook\react\node_modules\@storybook\core\dist\server\config\webpack.config.default.js:15:45)
ERR!     at createFinalDefaultConfig (D:\workspace\source\node_modules\@storybook\react\node_modules\@storybook\core\dist\server\core-preset-webpack-custom.js:35:71)
ERR!     at Object.webpack (D:\workspace\source\node_modules\@storybook\react\node_modules\@storybook\core\dist\server\core-preset-webpack-custom.js:59:38)
ERR!     at process._tickCallback (internal/process/next_tick.js:68:7)
ERR!   stack:
ERR!    'TypeError: Cannot read property \'rules\' of undefined
          at createDefaultWebpackConfig (D:\\workspace\\source\\node_modules\\@storybook\\react\\node_modules\\@storybook\\core\\dist\\server\\config\\webpack.config.default.js:15:45)
          at createFinalDefaultConfig (D:\\workspace\\source\\node_modules\\@storybook\\react\\node_modules\\@storybook\\core\\dist\\server\\core-preset-webpack-custom.js:35:71)
          at Object.webpack (D:\\workspace\\source\\node_modules\\@storybook\\react\\node_modules\\@storybook\\core\\dist\\server\\core-preset-webpack-custom.js:59:38)
          at process._tickCallback (internal/process/next_tick.js:68:7)' }

[igor-dv]

looks like you do not need this one (not sure it's related to the issue).

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

I will try to reproduce the problem later

[amittkSharma]

I tried by removing the rule as suggested above, but still getting the same error.

[pjm17971]

I believe I have the same issue. In my case I added storybook to an existing component library (not a CRA app) and needed to add the custom webpack config since the library is written in typescript. The changes I made followed the instructions in the storybook docs.

[ronihcohen]

On a new project (CRA 2.1.1 + Storybook 4.0.11) https://storybook.js.org/configurations/typescript-config/ didn't work for me today.

[igor-dv]

v4.1.0-alpha already supports TS out of the box for the CRA2 users, without creating a custom webpack.config. Can you check this ?

[igor-dv]

@amittkSharma , do you have a reproduction repo?

[amittkSharma]

@igor-dv: Will create one tomorrow and send you the repo name.

Thanks

• Amit

[amittkSharma]

@igor-dv: Here is the basic repo structure, please take a look at it. In my system, I am not able to reproduce the above error as there were some updates in the past but feel free to check it.

Thanks
Amit

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[amittkSharma]

This is issue is closed as reproduction repo is provided to the concerned team.

• Amit

[andremw]

Same problem here. @amittkSharma have you found a solution?

EDIT: Actually, I managed to make it work. I simply changed .storybook/webpack.config.js from

module.exports = (baseConfig, env, config) => {
to
module.exports = ({ config, mode }) => {

I could even change the npm script back to "storybook": "start-storybook -p 9009 -s public",