CODEWITHSUNDEEP
reactjswebpackstorybook
norbitrial
norbitrial

Reputation: 15176

Webpack 5 and Storybook 6 integration throws an error in DefinePlugin.js

Working on Webpack 5 and Storybook integration in our React apps' repository. Mainly upgrading from Webpack v4 to v5 because its support has been announced here in this blog post officially. Following the suggested full instructions.

With the below mentioned setup I get the following error message on the console:

<i> [webpack-dev-middleware] wait until bundle finished
10% building 0/1 entries 0/0 dependencies 0/0 modulesℹ ｢wdm｣: wait until bundle finished: 
/opt/app/node_modules/webpack/lib/DefinePlugin.js:549
           const oldVersion = compilation.valueCacheVersions.get(name);                                                                                           
                                                             ^
 TypeError: Cannot read property 'get' of undefined
    at /opt/app/node_modules/webpack/lib/DefinePlugin.js:549:57

Basically the error is coming from the marked line in /node_modules/webpack/lib/DefinePlugin.js once running for the first time npm run storybook.

Technical details:

See package.json related devDependencies:

"@storybook/addon-actions": "^6.2.3",
"@storybook/addon-controls": "^6.2.3",
"@storybook/addon-docs": "^6.2.3",
"@storybook/addon-knobs": "^6.2.3",
"@storybook/addon-links": "^6.2.3",
"@storybook/addon-options": "^5.3.21",
"@storybook/addon-toolbars": "^6.2.3",
"@storybook/addon-viewport": "^6.2.3",
"@storybook/addons": "^6.2.3",
"@storybook/builder-webpack5": "^6.2.3",
"@storybook/react": "^6.2.3",
"@storybook/storybook-deployer": "^2.8.7",
"@storybook/theming": "^6.2.3",
// ...
"@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
"html-webpack-harddisk-plugin": "^2.0.0",
"html-webpack-plugin": "^5.3.1",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"terser-webpack-plugin": "^5.1.1",
"uglifyjs-webpack-plugin": "^2.2.0",
// ...
"webpack": "^5.31.2",
"webpack-cli": "^3.3.12",
"webpack-dev-middleware": "^4.1.0",
"webpack-dev-server": "^3.11.2",
"webpack-filter-warnings-plugin": "^1.2.1",
"webpack-isomorphic-tools": "^4.0.0"
// ...
"crypto-browserify": "^3.12.0",
"stream-browserify": "^3.0.0"

Also the webpack.config.js content:

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

process.env.NODE_ENV = 'development'

module.exports = {
  resolve: {
    extensions: ['.ts', '.tsx', '.js'],
    alias: {
      '@src': path.resolve(__dirname, '../src'),
    },
    fallback: {
      stream: require.resolve('stream-browserify'),
      crypto: require.resolve('crypto-browserify'),
    },
  },
  plugins: [
    new webpack.EnvironmentPlugin({
      KEY: 'value'
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(js|ts|tsx)$/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
          },
        },
        exclude: [/node_modules/],
      }
    ],
  },
  devtool: 'source-map',
}

And the main.ts setup for Storybook:

import { StorybookConfig } from '@storybook/react/types'

module.exports = {
  core: {
    builder: 'webpack5',
  },
  stories: [
    '../../src/stories/**/*.example.@(ts|tsx)'
  ],
  logLevel: 'debug',
  reactOptions: {
    fastRefresh: true,
  },
  addons: [
    '@storybook/addon-docs',
    '@storybook/addon-controls',
    '@storybook/addon-options',
    '@storybook/addon-toolbars',
    '@storybook/addon-viewport',
  ],
  webpackFinal: config => {
    return {
      ...config,
      resolve: { ...config.resolve },
      module: { ...config.module }
    }
  },
} as StorybookConfig

Questions:

I have tried to downgrade webpack till the version of "webpack": "^5.25.1" where the issue is not existing but the Storybook pages are not loading anymore. Also I checked this answer here which seems unrelated.

I couldn't find anything related in the documentation. If more information needed, let me know in the comment section, thank you!

Upvotes: 14

Views: 29192

Answers (3)

pietrovismara
pietrovismara

Reputation: 6301

We had the same issue.

First, you will need to install @storybook/builder-webpack5@next.

Then you have to upgrade every @storybook dependency to version ^6.3.0-alpha.6 using this command:

npx sb@next upgrade --prerelease

Upgrade also dotenv-webpack to ^7.0.2.

Another small fix we had to do was to add this line in the storybook webpack.config.js file:

config.resolve.fallback = {
  http: false,
}

Full instructions can be found here

Upvotes: 17

Gal Margalit
Gal Margalit

Reputation: 5854

Update storybook components to their latest stable version,
no need for alphas (atm stable is 6.2.9)

You could follow the instructions here:

npm i -D @storybook/builder-webpack5@next
npm i -D dotenv-webpack

Then update your .storybook/main.js:

 module.exports = {
   core: {
     builder: "webpack5",
   }
 };

Upvotes: 9

azangru
azangru

Reputation: 2748

There's chaos with Storybook's own dependency on Webpack v.4 at the moment. Try pinning the version of your storybook packages at 6.2.3 and adding the latest dotenv-webpack as your dev dependency. Obviously, perform the usual dance of deleting the node_modules folder in case there are some conflicting dependencies.

Links to relevant issues:

Upvotes: 2

Related Questions