Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Storybook Webpack 5

Storybook experimental Webpack 5 support

Storybook 6.2 includes experimental Webpack 5 support. Webpack 5 brings a variety of performance improvements, as well as exciting new features like module federation. Here's a quick guide to get you going.

Intro

Storybook uses webpack to bundle its UI ("manager") and also user code in an iframe ("preview"). In Storybook 6.2, the manager is bundled in Webpack 4, and the preview can either be bundled in Webpack 4 (default) or Webpack 5 (opt-in). In Storybook 6.3, the manager is also bundled in Webpack 5 when the preview is bundled with Webpack 5.

Installation

NOTE: Before you try out Storybook's webpack5 support, make sure your project works with Webpack 5. For example, create-react-app (CRA) is not webpack5-compatible, so if you have a CRA project, you'll need to wait until webpack5 support is released. Once you've verified webpack5 in your project, you can either do a clean install or an upgrade.

Upgrading from Webpack 4

If you're upgrading an existing Storybook installation:

npx sb@next upgrade --prerelease

Then add dependencies:

npm i -D @storybook/builder-webpack5@next @storybook/manager-webpack5@next

Then update your .storybook/main.js:

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

Upgrading from 6.2 Webpack 5

If you were using Webpack 5 in 6.2, and have upgraded to 6.3, you probably need to add @storybook/manager-webpack5 as a dependency:

npm i -D @storybook/manager-webpack5@next

Clean install

If your project doesn't have Storybook installed:

npx sb@next init --builder webpack5

This adds storybook and automatically performs the extra steps descripted in the "Upgrade from Webpack 4" section.

Troubleshooting

Currently all storybook addons assume webpack 4. If you run into issues, try disabling addons and see if that fixes it. If you find an addon that needs to be upgraded to support Webpack 5, please file an issue and let us know!

Webpack 5 support is still experimental. If you run into problems, please check to see if somebody's already filed an issue Storybook repo and upvote it if there's an existing issue. If there's no existing issue, please file one and title it Webpack5: (problem summary).

Yarn resolutions

Some webpack5 projects are using Yarn resolutions to force a specific version of webpack across the entire project. We don't recommend this because it causes problems for Storybook which still uses webpack4 to build its "manager" UI (not user code). However, if you must use resolutions including all of the following packages is a workaround seems to patch over the issue:

{
  "resolutions": {
    "webpack": "^5.0.0",
    "css-loader": "^5.0.0",
    "dotenv-webpack": "^6.0.0",
    "html-webpack-plugin": "^5.0.0",
    "style-loader": "^2.0.0",
    "terser-webpack-plugin": "^5.0.0",
    "webpack-dev-middleware": "^4.1.0",
    "webpack-virtual-modules": "^0.4.2"
  }
}

We're considering a proper solution in #14044.

@ntucker

This comment has been minimized.

Copy link

@ntucker ntucker commented Feb 20, 2021

Still getting jantimon/html-webpack-plugin#1451 due to webpack 4 still being installed. If it's simply not installed that would be great.

@shilman

This comment has been minimized.

Copy link
Owner Author

@shilman shilman commented Feb 20, 2021

@ntucker can you file an issue in storybook with a repro, or at least a description of your project structure (node_modules)

@djaxho

This comment has been minimized.

Copy link

@djaxho djaxho commented Feb 21, 2021

Super excited about this update! thanks
I did have to npm -i D @storybook/semver to avoid the following error

Failed to load preset: "/node_modules/@storybook/builder-webpack5/dist/cjs/presets/preview-preset.js"
ERR! Error: Cannot find module '@storybook/semver/package.json'
@jdelStrother

This comment has been minimized.

Copy link

@jdelStrother jdelStrother commented Feb 24, 2021

A few stumbling blocks I ran into:


ModuleBuildError: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/jon/Developer/web/webpack/assets/javascripts/components/lazy_load.tsx: Missing class properties transform.

Spent ages trying to tweak my babel config to fix this. Turns out that Storybook already includes the class properties transform, but some weirdness in conflicting babel plugin versions seems to prevent it activating. Fixed by deleting yarn.lock & reinstalling, or running yarn-deduplicate yarn.lock


Error: NormalModuleFactory.afterResolve (CaseSensitivePathsPlugin, ReactRefreshPlugin) is no longer a waterfall hook, but a bailing hook instead. Do not return the passed object, but modify it instead. Returning false will ignore the request and results in no module created.

Fixed by disabling reactOptions: { fastRefresh: true }

(Looks like this is being worked on here: pmmmwh/react-refresh-webpack-plugin#308)


ERR! TypeError: Cannot read property 'data' of undefined
ERR! at setData (app/node_modules/webpack-virtual-modules/index.js:84:15)

I was naively hoping to avoid installing both webpack 4 & webpack 5 using resolutions: { webpack: "^5.23.0" }. Don't do this, it doesn't work.

@shilman

This comment has been minimized.

Copy link
Owner Author

@shilman shilman commented Feb 25, 2021

I was naively hoping to avoid installing both webpack 4 & webpack 5 using resolutions: { webpack: "^5.23.0" }. Don't do this, it doesn't work.

@jdelStrother I added a section on this at the end of the gist

@jthn

This comment has been minimized.

Copy link

@jthn jthn commented Mar 5, 2021

Thanks, this is super helpful. One thing to note, I performed a "Clean Install" as described, everything worked as expected.

If I set the yarn version to 2 with yarn set version berry it breaks with a module parse error and webpack5 missing polyfill errors.

99% done plugins webpack-hot-middlewarewebpack built preview da3961b5e3463dedabae in 10978ms
ModuleParseError: Module parse failed: Unexpected token (20:27)
File was processed with these loaders:
 * ./.yarn/$$virtual/@storybook-source-loader-virtual-d66742926e/0/cache/@storybook-source-loader-npm-6.2.0-beta.9-cbb5be3151-b1c40ce92c.zip/node_modules/@storybook/source-loader/dist/cjs/index.js
You may need an additional loader to handle the result of these loaders.
| };
|
> const Template = (args) => <Button {...args} />;
|

[snip]

resolve '@mdx-js/react' in '/Users/jonathan/code/sb-beta2/stories'
  Parsed request is a module
  using description file: /Users/jonathan/code/sb-beta2/package.json (relative path: ./stories)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /Users/jonathan/code/sb-beta2/stories/node_modules doesn't exist or is not a directory
      looking for modules in /Users/jonathan/code/sb-beta2/node_modules
        using description file: /Users/jonathan/code/sb-beta2/package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
          root path /Users/jonathan/code/sb-beta2

[snip]

ModuleNotFoundError: Module not found: Error: Can't resolve 'assert' in '/Users/jonathan/code/sb-beta2/.yarn/cache/doctrine-npm-3.0.0-c6f1615f04-2eae469bd2.zip/node_modules/doctrine/lib'

Results were the same with and without the resolutions in place.

I know pnp support isn't necessarily at the front of everyone's mind, but yarn 2 works on 6.1 as expected. I'd love to help but I'm running out of ideas. Any thoughts on where to look?

@azangru

This comment has been minimized.

Copy link

@azangru azangru commented Mar 8, 2021

I failed to find the error below in the storybook repo; so I thought I might as well ask about it here. Webpack's DefinePlugin is unhappy:

ERROR in ./node_modules/@emotion/sheet/dist/sheet.browser.esm.js                                                                                                                                          Module parse failed: parser.isAsiPosition is not a function                                                                                                                                               
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders                                        
TypeError: parser.isAsiPosition is not a function                                                                                                                                                         
    at [path-to-project-folder]/node_modules/webpack/lib/DefinePlugin.js:233:18                                                                                               
    at SyncBailHook.eval [as call] (eval at create ([path-to-project-folder]/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:16)       
    at Parser.walkMemberExpression ([path-to-project-folder]/node_modules/@storybook/core-server/node_modules/webpack/lib/Parser.js:1958:35)                                  
    at Parser.walkExpression ([path-to-project-folder]/node_modules/@storybook/core-server/node_modules/webpack/lib/Parser.js:1610:10)                                        
    at Parser.walkLeftRightExpression ([path-to-project-folder]/node_modules/@storybook/core-server/node_modules/webpack/lib/Parser.js:1748:8)                                
    at Parser.walkBinaryExpression ([path-to-project-folder]/node_modules/@storybook/core-server/node_modules/webpack/lib/Parser.js:1753:8)                                   
    at Parser.walkExpression ([path-to-project-folder]/node_modules/@storybook/core-server/node_modules/webpack/lib/Parser.js:1589:10)                                        
    at Parser.walkConditionalExpression ([path-to-project-folder]/node_modules/@storybook/core-server/node_modules/webpack/lib/Parser.js:1804:9)                              
    at Parser.walkExpression ([path-to-project-folder]/node_modules/@storybook/core-server/node_modules/webpack/lib/Parser.js:1598:10)                                        
    at Parser.walkAssignmentExpression ([path-to-project-folder]/node_modules/@storybook/core-server/node_modules/webpack/lib/Parser.js:1793:8)                               
    at Parser.walkExpression ([path-to-project-folder]/node_modules/@storybook/core-server/node_modules/webpack/lib/Parser.js:1583:10)                                        
    at Parser.walkExpressionStatement ([path-to-project-folder]/node_modules/@storybook/core-server/node_modules/webpack/lib/Parser.js:1022:8)                                
    at Parser.walkStatement ([path-to-project-folder]/node_modules/@storybook/core-server/node_modules/webpack/lib/Parser.js:964:10)                                          
    at Parser.walkStatements ([path-to-project-folder]/node_modules/@storybook/core-server/node_modules/webpack/lib/Parser.js:868:9)                                          
    at [path-to-project-folder]/node_modules/@storybook/core-server/node_modules/webpack/lib/Parser.js:1017:9
    at Parser.inBlockScope ([path-to-project-folder]/node_modules/@storybook/core-server/node_modules/webpack/lib/Parser.js:2060:3)
 @ ./node_modules/@emotion/core/dist/core.browser.esm.js 8:0-44 76:21-31
 @ ./node_modules/@storybook/theming/dist/esm/index.js
 @ ./node_modules/@storybook/addon-viewport/dist/esm/Tool.js
 @ ./node_modules/@storybook/addon-viewport/dist/esm/register.js
 @ multi ./node_modules/@storybook/core-server/dist/cjs/globals/polyfills.js ./.storybook/manager.js ./node_modules/@storybook/core-client/dist/esm/manager/index.js ./node_modules/@storybook/addon-docs/
dist/esm/register.js ./node_modules/@storybook/addon-controls/dist/esm/register.js ./node_modules/@storybook/addon-actions/dist/esm/register.js ./node_modules/@storybook/addon-backgrounds/dist/esm/regis
ter.js ./node_modules/@storybook/addon-viewport/dist/esm/register.js ./node_modules/@storybook/addon-toolbars/dist/esm/register.js ./.storybook/generated-refs.js

This error seems to be coming from @storybook/addon-viewport; but there are similar errors from other storybook packages such as this one:

ERROR in ./node_modules/invariant/invariant.js                                                                                                                                                            
Module parse failed: parser.isAsiPosition is not a function                                                                                                                                               
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders                                        
TypeError: parser.isAsiPosition is not a function                                                                                                                                                         
    at [path-to-project-folder]/node_modules/webpack/lib/DefinePlugin.js:233:18                                                                                               
    at SyncBailHook.eval [as call] (eval at create ([path-to-project-folder]/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:16)       
    at Parser.walkMemberExpression ([path-to-project-folder]/node_modules/@storybook/core-server/node_modules/webpack/lib/Parser.js:1958:35)                                  
    at Parser.walkExpression ([path-to-project-folder]/node_modules/@storybook/core-server/node_modules/webpack/lib/Parser.js:1610:10)                                        
    at Parser.walkVariableDeclaration ([path-to-project-folder]/node_modules/@storybook/core-server/node_modules/webpack/lib/Parser.js:1469:32)                               
    at Parser.walkStatement ([path-to-project-folder]/node_modules/@storybook/core-server/node_modules/webpack/lib/Parser.js:997:10)                                          
    at Parser.walkStatements ([path-to-project-folder]/node_modules/@storybook/core-server/node_modules/webpack/lib/Parser.js:868:9)                                          
    at Parser.parse ([path-to-project-folder]/node_modules/@storybook/core-server/node_modules/webpack/lib/Parser.js:2297:9)                                                  
    at [path-to-project-folder]/node_modules/@storybook/core-server/node_modules/webpack/lib/NormalModule.js:482:32                                                           
    at [path-to-project-folder]/node_modules/@storybook/core-server/node_modules/webpack/lib/NormalModule.js:358:12                                                           
    at [path-to-project-folder]/node_modules/@storybook/core-server/node_modules/loader-runner/lib/LoaderRunner.js:373:3                                                      
    at iterateNormalLoaders ([path-to-project-folder]/node_modules/@storybook/core-server/node_modules/loader-runner/lib/LoaderRunner.js:214:10)                              
    at Array.<anonymous> ([path-to-project-folder]/node_modules/@storybook/core-server/node_modules/loader-runner/lib/LoaderRunner.js:205:4)                                  
    at Storage.finished ([path-to-project-folder]/node_modules/@storybook/core-server/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)                       
    at [path-to-project-folder]/node_modules/@storybook/core-server/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9                                           
    at [path-to-project-folder]/node_modules/graceful-fs/graceful-fs.js:123:16                                                                                                
 @ ./node_modules/react-helmet-async/lib/index.module.js 1:97-122 1:10211-10212 1:10559-10560                                                                                                             
 @ ./node_modules/@storybook/ui/dist/esm/index.js                                                                                                                                                         
 @ ./node_modules/@storybook/core-client/dist/esm/manager/index.js                                                                                                                                        
 @ multi ./node_modules/@storybook/core-server/dist/cjs/globals/polyfills.js ./.storybook/manager.js ./node_modules/@storybook/core-client/dist/esm/manager/index.js ./node_modules/@storybook/addon-docs/
dist/esm/register.js ./node_modules/@storybook/addon-controls/dist/esm/register.js ./node_modules/@storybook/addon-actions/dist/esm/register.js ./node_modules/@storybook/addon-backgrounds/dist/esm/regis
ter.js ./node_modules/@storybook/addon-viewport/dist/esm/register.js ./node_modules/@storybook/addon-toolbars/dist/esm/register.js ./.storybook/generated-refs.js    
@shilman

This comment has been minimized.

Copy link
Owner Author

@shilman shilman commented Mar 9, 2021

@azangru please file an issue if you haven’t a already 🙏

@mareksuscak

This comment has been minimized.

Copy link

@mareksuscak mareksuscak commented Mar 25, 2021

For anyone reading this, watch out for the new sideEffects option! Storybook appears to be using a different default than some of the application frameworks such as Gatsby and Next. It'll aggressively remove side effect only imports such as:

import '../assets/global.scss'
import './js-file-with-side-effects'

Unlike CSS preset, SCSS preset has not caught up with webpack 5 changes yet and any global SCSS file imports will be optimized away by webpack. I literally lost a day of work trying to figure out why our storybook setup was not loading styles and one other file (side-effect import).

@jcamden

This comment has been minimized.

Copy link

@jcamden jcamden commented Mar 26, 2021

@jthn I want to note that if things are set up correctly, you might not actually need any polyfills (unless you use @storybook/addon-docs which does require the assert polyfill, below). That said, you can add polyfills (and addons if you want) to Storybook's Webpack config in main.js like this:

module.exports = {
  core: {
    builder: 'webpack5',
  },
  stories: ['../whatever/src/**/*.stories.@(ts|tsx)'],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-controls',
    '@storybook/addon-docs',
  ],
  webpackFinal: (config) => {
    return {
      ...config,
      resolve: {
        ...config.resolve,
        fallback: {
          ...config.fallback,
          assert: require.resolve('assert-browserify/'),
        },
      },
    };
  },
};

For PnP, I added one package extension to my .yarnrc.yml:

packageExtensions:
  "@storybook/react@*":
    peerDependencies:
      "@storybook/builder-webpack5": "*"

The Yarn resolutions mentioned above will have both your preview-builder and manager-builder on Webpack 5. Here's what I did specifically:

 "resolutions": {
    "webpack": "^5.27.2",
    "css-loader": "^5.0.1",
    "dotenv-webpack": "^7.0.2",
    "html-webpack-plugin": "^5.0.0",
    "style-loader": "^2.0.0",
    "terser-webpack-plugin": "^5.1.1",
    "webpack-dev-middleware": "^4.1.0",
    "webpack-virtual-modules": "^0.4.2"
  }

With these resolutions, Yarn detects that Webpack 4 is no longer used and removes it. The SB build gives this warning:

Screenshot_2021-03-26_13-30-52

Re: addons, I had serious issues with node polyfills when attempting to use addon-essentials. I've been... adding... addons piecemeal instead, and that seems to be working without any polyfills (@storybook/actions and @storybook/controls are good oob; @storybook/docs requires the assert polyfill (above), @storybook/addons is also working fine with theming in manager.ts---that is:

import { addons } from '@storybook/addons';
import { themes } from '@storybook/theming';

addons.setConfig({
  theme: themes.dark,
}); 

Also of note, it seems like the dev-server builds are getting cached by SB in a local (to the package where Storybook is installed) node_modules directory (that is, whatever-package/node_modules/.cache/storybook/dev-server). Yes, I know, node_modules is for non-Yarn-using peasants; but anyway deleting the dev-server sub-directory regularly can help you debug your build and potentially spare you from building out long lists of unnecessary node polyfills.

I also just want to note that adding sass-loader to Webpack config.module.rules works as expected. Maybe that will help if people run into the problem with @mareksuscak mentioned or other sass-related problems; e.g.:

 module: {
        ...config.module,
        rules: [
          ...config.module.rules,
          {
            test: /\.(scss)$/,
            use: [
              {
                loader: 'style-loader',
              },
              {
                loader: 'css-loader',
              },
              {
                loader: 'postcss-loader',
                options: {
                  postcssOptions: {
                    plugins: function () {
                      return [require('precss'), require('autoprefixer')];
                    },
                  },
                },
              },
              {
                loader: require.resolve('sass-loader'),
                options: {
                  // using sass (Dart) instead of node-sass because node-sass (Javascript) cannot resolve Yarn 2's Plug'N'Play synthetic node_modules directory
                  // Evidently, sass is a bit slower to compile than node-sass, but I think I prefer sass anyway for latest features (such as @use)
                  implementation: require('sass'),
                },
              },
            ],
          },
        ],
      },
@norbitrial

This comment has been minimized.

Copy link

@norbitrial norbitrial commented Apr 13, 2021

I'm really happy about this prerelease, thanks for working on that! ❤️


For some reason I get the following error with webpack v5.31.2:

/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

Then just seen the webpack v5.32.0 got released where I got a bit different error:

/opt/app/node_modules/webpack/lib/util/MapHelpers.js:17
        const value = map.get(key);
                          ^
TypeError: Cannot read property 'get' of undefined
    at exports.provide (/opt/app/node_modules/webpack/lib/util/MapHelpers.js:17:20)
    at /opt/app/node_modules/webpack/lib/DefinePlugin.js:289:51

But that leads still to the valueCacheVersions is undefined issue in the DefinePlugin.js file:

  • In v5.31.2 here,
  • Or in v5.32.0 here - where the map is the valueCacheVersions, mainly passed here as compilation.valueCacheVersions.

Is there any configuration what I need to add? Probably I'm missing something here. Interesting part once I run for the second time the npm run storybook, everything seems to be working as expected.

See for more details in this SO question what I faced with.

@faulpeltz

This comment has been minimized.

Copy link

@faulpeltz faulpeltz commented Apr 14, 2021

I've seen the same thing with "valueCacheVersions"
I think somehow the manager build gets confused and mixes up v4/v5 modules - can you lookat the full stack trace? in my case there were modules from
node_modules/webpack (the installed v5) as well as node_modules/@storybook/core-server/node_modules/webpack (which is v4 required by sb)

@norbitrial

This comment has been minimized.

Copy link

@norbitrial norbitrial commented Apr 14, 2021

I've seen the same thing with "valueCacheVersions"
I think somehow the manager build gets confused and mixes up v4/v5 modules - can you lookat the full stack trace? in my case there were modules from
node_modules/webpack (the installed v5) as well as node_modules/@storybook/core-server/node_modules/webpack (which is v4 required by sb)

I found a solution already here for my question on that Stack Overflow answer. Also they have an issue where I posted what helped me resolving on my end that error.

Now it's working fine! 👍

@ntucker

This comment has been minimized.

Copy link

@ntucker ntucker commented Apr 14, 2021

The yarn resolutions part added to this gist worked for me. Hooray!

@jqrun

This comment has been minimized.

Copy link

@jqrun jqrun commented Apr 15, 2021

I think the webpack-dev-middleware part of yarn resolutions breaks in >6.3.0-alpha.2 due to storybookjs/storybook@44412aa#diff-ba56cea58d5a94534a59f20f7e9c60acdafc69f05b4da469282fbe1c92d46706. Which adds watchOptions (removed in webpack-dev-middleware v4)

[16:08:32] ValidationError: Invalid options object. Dev Middleware has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'watchOptions'. These properties are valid:
   object { mimeTypes?, writeToDisk?, methods?, headers?, publicPath?, stats?, serverSideRender?, outputFileSystem?, index? }
    at validate (/project/node_modules/schema-utils/dist/validate.js:104:11)
    at wdm (/project/node_modules/webpack-dev-middleware/dist/index.js:29:29)
    at Object.start (/project/node_modules/@storybook/core/node_modules/@storybook/core-server/dist/cjs/manager/builder.js:146:51)
@NeoSimvolist

This comment has been minimized.

Copy link

@NeoSimvolist NeoSimvolist commented Apr 26, 2021

A clean install of angular and then a storybook results in an error
image

for reproduce:
ng new app
npx sb@next init --builder webpack5
npm run storybook

or use https://github.com/NeoSimvolist/ng-storybook-reproduce

@Nickhoyer

This comment has been minimized.

Copy link

@Nickhoyer Nickhoyer commented May 10, 2021

I think the webpack-dev-middleware part of yarn resolutions breaks in >6.3.0-alpha.2 due to storybookjs/storybook@44412aa#diff-ba56cea58d5a94534a59f20f7e9c60acdafc69f05b4da469282fbe1c92d46706. Which adds watchOptions (removed in webpack-dev-middleware v4)

[16:08:32] ValidationError: Invalid options object. Dev Middleware has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'watchOptions'. These properties are valid:
   object { mimeTypes?, writeToDisk?, methods?, headers?, publicPath?, stats?, serverSideRender?, outputFileSystem?, index? }
    at validate (/project/node_modules/schema-utils/dist/validate.js:104:11)
    at wdm (/project/node_modules/webpack-dev-middleware/dist/index.js:29:29)
    at Object.start (/project/node_modules/@storybook/core/node_modules/@storybook/core-server/dist/cjs/manager/builder.js:146:51)

I'm having this same issue... Is there a workaround?

@imgalli

This comment has been minimized.

Copy link

@imgalli imgalli commented May 13, 2021

Whilst run + build are working fine for me locally, when deploying to CI I was getting an unusual error around path-browserify - I put this down to our config.

Just updated to latest alpha tags, locally all fine but on CI now getting this:

WARN Unexpected webpack version in manager-builder
WARN - Received: 5.37.0
WARN - Expected: 4.x
WARN 
WARN For more info: https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324#troubleshooting
info => Compiling preview..
info => Loading 1 config file in "/home/runner/work/xxx/.storybook"
info => Loading 6 other files in "/home/runner/work/xxx/.storybook"
info => Adding stories defined in "/home/runner/work/xxx/.storybook/main.js"
ERR! Error: Cannot find module 'schema-utils/dist/ValidationError'
ERR! Require stack:
...
@blainebell

This comment has been minimized.

Copy link

@blainebell blainebell commented May 17, 2021

After following this page to upgrade to multiple existing storybook installations (to v6.2.9, inside a mono-repo), I am getting an error:

info => Loading custom Webpack config (full-control mode).
10% building 0/1 entries 0/0 dependencies 0/0 modules/Users/blaine.bell/code/aurora/node_modules/webpack/lib/util/MapHelpers.js:17
	const value = map.get(key);

TypeError: Cannot read property 'get' of undefined
    at exports.provide (/Users/blaine.bell/code/aurora/node_modules/webpack/lib/util/MapHelpers.js:17:20)
    at compiler.hooks.compilation.tap (/Users/blaine.bell/code/aurora/node_modules/webpack/lib/DefinePlugin.js:289:51)
    at SyncHook.eval [as call] (eval at create (/Users/blaine.bell/code/aurora/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at SyncHook.lazyCompileHook (/Users/blaine.bell/code/aurora/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.newCompilation (/Users/blaine.bell/code/aurora/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:631:26)
    at hooks.beforeCompile.callAsync.err (/Users/blaine.bell/code/aurora/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:667:29)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/blaine.bell/code/aurora/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/blaine.bell/code/aurora/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.compile (/Users/blaine.bell/code/aurora/node_modules/@storybook/core-server/node_modules/webpack/lib/Compiler.js:662:28)

I took out the addons in main.js and still get the error. any ideas on how to figure this out?

Thanks!

@azangru

This comment has been minimized.

Copy link

@azangru azangru commented May 17, 2021

Add dotenv-webpack to your own dependencies?

(see e.g. storybookjs/storybook#14497)

@blainebell

This comment has been minimized.

Copy link

@blainebell blainebell commented May 17, 2021

I had dotenv-webpack in devDependencies, but moved it to dependencies, and still get the same error.

I am using npm, and not yarn, could that be a problem?

also, I see "html-webpack-plugin": "^4.0.0", in the package-lock.json file under @storybook/core-server which is 6.2.9, is that right?

thanks for your help!

@blainebell

This comment has been minimized.

Copy link

@blainebell blainebell commented May 17, 2021

it looks like dotenv-webpack@1.8.0 is installed, instead of ^7.0.2 which is what I specify. Looking at the package-lock,json file, it looks like "dotenv-webpack": "^1.8.0" is listed under @storybook/builder-webpack4 which automatically gets installed since its a dependency under @storybook/core-server.

I took out all addons, and now I am getting this error:

/Users/blaine.bell/code/aurora/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:125
			throw new TypeError(
			^

TypeError: The 'compilation' argument must be an instance of Compilation
    at Function.getCompilationHooks (/Users/blaine.bell/code/aurora/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:125:10)
    at compiler.hooks.compilation.tap.compilation (/Users/blaine.bell/code/aurora/node_modules/terser-webpack-plugin/dist/index.js:571:67)
    at SyncHook.eval [as call] (eval at create (/Users/blaine.bell/code/aurora/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:87:1)
    at SyncHook.lazyCompileHook (/Users/blaine.bell/code/aurora/node_modules/tapable/lib/Hook.js:154:20)

It looks like I have a bunch of dependencies on "html-webpack-plugin": "^5.3.1",, I think I saw a post that told me to add this. Also, 4.5.2 is installed in node_modules, must be because storybook depends on it? should I just take it out of my dependencies?

@lifedup

This comment has been minimized.

Copy link

@lifedup lifedup commented May 19, 2021

@norbitrial I got the same TypeError: Cannot read property 'get' of undefined and it was from using webpack 5 with the storybook a11y plugin. I removed the plugin from my package and main.js file and it works again.

@blainebell

This comment has been minimized.

Copy link

@blainebell blainebell commented May 19, 2021

thanks for the reply! Yes, I removed all addons from dependencies, and started adding back once I got errors. I think the APIs have changed between 6.1.1, so I had to fix some configurations as well. I have 4 storybooks inside one monorepo, so I still need to rework some of the dependencies. I also added the newest versions of html-webpack-plugin and terser-webpack-plugin in the top-level, which for some reason older versions were being loaded. But it's not clear that i needed to do all of these changes, so I will iterate on it until the dependencies work and its clean. Thanks everyone for your help and quick responses!

@bryanjknight

This comment has been minimized.

Copy link

@bryanjknight bryanjknight commented May 20, 2021

FWIW, I was also getting the TypeError: Cannot read property 'get' of undefined with a clean install storybook. Interestingly enough, switching from npm to yarn help.

@designermanjeets

This comment has been minimized.

Copy link

@designermanjeets designermanjeets commented May 24, 2021

People getting error TypeError: Cannot read property 'get' of undefined should install "dotenv-webpack": "^7.0.2", as a dev dependency.

@imgalli

This comment has been minimized.

Copy link

@imgalli imgalli commented May 24, 2021

Hi, revisiting my test branch I tried re-installing deps and now getting the following when previously I had it working fine. Have tried upgrading latest pre-release.

ERR! Error: Cannot find module '@storybook/manager-webpack5'
@shilman

This comment has been minimized.

Copy link
Owner Author

@shilman shilman commented May 24, 2021

Hi @imgalli, I've updated the gist. See the new "Upgrading from 6.2 Webpack 5" section.

@imgalli

This comment has been minimized.

Copy link

@imgalli imgalli commented May 25, 2021

Great, thank you! I'm now onto this error :( Granted this is when trying to run a dev server, not through storybook but figured I'd ask as others have had similar errors in this thread webpack-dev-middleware: options has an unknown property 'logLevel':
https://stackoverflow.com/questions/67676454/webpack-dev-middleware-options-has-an-unknown-property-loglevel

@reifnotreef

This comment has been minimized.

Copy link

@reifnotreef reifnotreef commented Jun 1, 2021

People getting error TypeError: Cannot read property 'get' of undefined should install "dotenv-webpack": "^7.0.2", as a dev dependency.

Having this same error.

@zorbash

This comment has been minimized.

Copy link

@zorbash zorbash commented Jun 11, 2021

My project doesn't even depend on dotenv-webpack and still get this error.

@azangru

This comment has been minimized.

Copy link

@azangru azangru commented Jun 11, 2021

doesn't even depend on dotenv-webpack

This may be precisely the problem 😄

Do you have a .env file in your project? If so, storybook may be attempting to read it and may be using an old version of dotenv-webpack which isn't compatible with webpack 5. If this is the case, you need to install your own version of dotenv-webpack to prevent storybook from installing its own outdated dependency.

At least this used to be the case several months ago; perhaps by now it's something completely different.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment