Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Storybook Webpack 5

⚠️ Warning: this document is out of date.

For the most recent webpack5 instructions see MIGRATION.md.

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 v4 (CRA v4) is not webpack5-compatible, so if you have a CRA project, you'll need to upgrade to CRA v5 which uses webpack5. 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 webpack@5

Note that the webpack@5 dev dependency forces webpack5 to be hoisted, since SB also contains a webpack4 dependency

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.

@NeoSimvolist
Copy link

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
Copy link

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
Copy link

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
Copy link

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
Copy link

azangru commented May 17, 2021

Add dotenv-webpack to your own dependencies?

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

@blainebell
Copy link

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
Copy link

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
Copy link

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
Copy link

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
Copy link

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
Copy link

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
Copy link

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
Copy link
Author

shilman commented May 24, 2021

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

@imgalli
Copy link

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

@just-Bri
Copy link

just-Bri 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
Copy link

zorbash commented Jun 11, 2021

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

@azangru
Copy link

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.

@Kikobeats
Copy link

Kikobeats commented Jun 17, 2021

Thanks for all the tips here 🙏

I'm still facing with a strange issue: Although the terminal is reporting all is fine, when I enter into Storybook URL, it looks empty:

Screen Shot 2021-06-17 at 13 58 10

I've my stories properly setup, so not sure what's happening. Any way I can debug this?

@yzhe554
Copy link

yzhe554 commented Jun 24, 2021

I am using Angular 12 and storybook 6.3.0.
Following the instructions, I can get everything working locally but when I try to build-storybook, it hangs at

WARN main (7.74 MiB)
WARN runtime~main.e40db4bb.iframe.bundle.js
WARN 522.a411eebb.iframe.bundle.js
WARN main.3a9beb00.iframe.bundle.js
WARN
info => Output directory: ****(folder path)

Anyone else saw this before and is there a workaround?

@eden-lane
Copy link

eden-lane commented Jun 29, 2021

Ah.. it stuck on 99%:

99% done plugins webpack-hot-middlewarewebpack built preview fc852923b263f5101c70 in 2142ms

Tried upgrade and clean install

UPD: here is the issue storybookjs/storybook#14405

@naoyeye
Copy link

naoyeye commented Jul 5, 2021

Thanks for all the tips here 🙏

I'm still facing with a strange issue: Although the terminal is reporting all is fine, when I enter into Storybook URL, it looks empty:

I've my stories properly setup, so not sure what's happening. Any way I can debug this?

@Kikobeats:
I got the same error today, try to remove node_modules then reinstall all of the packages, that worked for me. have a good luck!
same issue: storybookjs/storybook#15225

@tschaffter
Copy link

tschaffter commented Jul 7, 2021

@yzhe554 I have the same issue as you after updating Storybook to use Webpack 5. I can successfully start the storybook server but building storybook hangs forever at the same place as you. Did you find a solution?

@shilman
Copy link
Author

shilman commented Jul 7, 2021

@tschaffter @yzhe554 fix coming to 6.4-alpha later today!

@bjornarhagen
Copy link

bjornarhagen commented Jul 7, 2021

I had the same issue where it hangs on info => Output directory: ....., but the 6.4.0-alpha.12 seems to work for me. Thanks a lot @shilman 😄

@rgoldfinger-quizlet
Copy link

rgoldfinger-quizlet commented Jul 12, 2021

I also had to add a resolution for "@types/webpack": "^5.0.0", otherwise it was installing the typedefs for webpack 4.

@AlexandreKilian
Copy link

AlexandreKilian commented Aug 8, 2021

I'm getting the error
ERR! Error: For the selected environment is no default script chunk format available:
only with webpack 5 in storybook, webpack for my electron setup works just fine… Anyone else resolved this?

@mrcrumpy
Copy link

mrcrumpy commented Aug 18, 2021

I'm stumbling into the same error:
ERR! Error: For the selected environment is no default script chunk format available: ERR! JSONP Array push can be chosen when 'document' or 'importScripts' is available. ERR! CommonJs exports can be chosen when 'require' or node builtins are available. ERR! Make sure that your 'browserslist' includes only platforms that support these features or select an appropriate 'target' to allow selecting a chunk format by default. Alternatively specify the 'output.chunkFormat' directly.

I tried setting the target and tried setting the chunkFormat in a custom webpack config

@elodszopos
Copy link

elodszopos commented Aug 19, 2021

I finally got this to work.

Key takeaways:

 "devDependencies": {
    "@babel/core": "7.15.0",
    "@babel/preset-env": "7.15.0",
    "@storybook/addon-actions": "6.4.0-alpha.30",
    "@storybook/addon-controls": "6.4.0-alpha.30",
    "@storybook/addon-docs": "6.4.0-alpha.30",
    "@storybook/addon-postcss": "2.0.0",
    "@storybook/addon-viewport": "6.4.0-alpha.30",
    "@storybook/addons": "6.4.0-alpha.30",
    "@storybook/builder-webpack5": "6.4.0-alpha.30",
    "@storybook/manager-webpack5": "6.4.0-alpha.30",
    "@storybook/preset-scss": "1.0.3",
    "@storybook/react": "6.4.0-alpha.30",
    "@svgr/webpack": "5.5.0",
    ...
    "@types/webpack": "5.28.0",
    "@types/dotenv-webpack": "7.0.3",
    ...
    "dotenv-webpack": "7.0.3",
    ...
    "webpack": "5.51.1",

The above dependencies got me past the 99% blocker. Afterwards, any story that contained an imported svg failed to load .. because storybook was trying to load svg using file loader, with the base loader that it has for assets.

To get past that blocker and to have stories that contained icons working too, I had to make the base file loader on the storybook webpack config ignore svgs, and I provided loader rules for svgs instead.

Inside webpackFinal under main.js:

const fileLoaderRule = rules.find(rule => rule.test && rule.test.test('.svg'));

fileLoaderRule.exclude = /\.svg$/;

rules.push({
  test: /\.svg$/,
  issuer: /\.(js|ts)x?$/,
  use: ['@svgr/webpack', 'url-loader'],
});
    

Just push the rule - no loader order problem if svgs don't go through file loader at all. Load them as urls to resolve imports and then load them using svgr.

Et voila, storybook with webpack 5 FINALLY working.

@vikashruhilgit
Copy link

vikashruhilgit commented Aug 20, 2021

Hi,

it's been several days since i stuck with the issue,

i tried all the solution but no luck.

will be please help me out.

issue is :

start-storybook works but build-storybook fails

start-storybook works smooth with add-ons as well.

but build-storybook fails, if i add any of the addons in .storybook.main.ts

error is:

yarn build-storybook yarn run v1.22.11 $ build-storybook (node:43478) UnhandledPromiseRejectionWarning: Error: [@web/dev-server-storybook] Official storybook addons are not es modules, and cannot be loaded from this storybook implementation. at Object.createError (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/@web/dev-server-storybook/dist/shared/utils.js:10:12) at validateMainJs (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/@web/dev-server-storybook/dist/shared/config/readStorybookConfig.js:26:27) at Object.readStorybookConfig (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/@web/dev-server-storybook/dist/shared/config/readStorybookConfig.js:56:20)

and also if i remove addons then also its fails and throw an error:

yarn build-storybook yarn run v1.22.11 $ build-storybook (node:43347) UnhandledPromiseRejectionWarning: Error: The keyword 'interface' is reserved (Note that you need plugins to import files that are not JavaScript) at error (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:151:30) at Module.error (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:10059:16) at Module.tryParse (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:10462:25) at Module.setSource (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:10365:24) at ModuleLoader.addModuleSource (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:19708:20) at async ModuleLoader.fetchModule (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:19764:9) at async Promise.all (index 2) at async ModuleLoader.fetchStaticDependencies (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:19790:34) at async Promise.all (index 0) at async ModuleLoader.fetchModule (/Users/vikashruhil/Documents/work/UI/firstech-ui/node_modules/rollup/dist/shared/rollup.js:19766:9) (Use node --trace-warnings ...to show where the warning was created) (node:43347) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag--unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1) (node:43347) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

my configurations are:

its a web component package library by open-wc generator.

then i upgraded that to latest storybook for sass support. everything is working except build-storybook

project dependencies and dev-dependencies are:

"dependencies": { "lit-element": "^2.5.1", "lit-html": "^1.4.1", }, "devDependencies": { "@open-wc/eslint-config": "^4.3.0", "@open-wc/testing": "^2.5.33", "@storybook/addon-essentials": "^6.3.7", "@storybook/addons": "^6.3.7", "@storybook/builder-webpack5": "^6.2.9", "@storybook/manager-webpack5": "^6.2.9", "@storybook/web-components": "^6.3.7", "@types/webpack": "^5.0.0", "@typescript-eslint/eslint-plugin": "^4.28.0", "@typescript-eslint/parser": "^4.28.0", "@web/dev-server": "^0.1.17", "@web/dev-server-storybook": "^0.3.5", "@web/test-runner": "^0.12.20", "babel-loader": "^8.2.2", "clean-webpack-plugin": "^4.0.0-alpha.0", "concurrently": "^5.3.0", "css-loader": "^6.2.0", "eslint": "^7.29.0", "eslint-config-prettier": "^7.2.0", "extract-loader": "^5.1.0", "husky": "^4.3.8", "lint-staged": "^10.5.4", "lit": "^2.0.0-rc.2", "lit-scss-loader": "^1.1.0", "prettier": "^2.2.1", "sass": "^1.38.0", "sass-loader": "^12.1.0", "style-loader": "^3.2.1", "ts-loader": "^9.2.5", "tslib": "^2.3.0", "typescript": "^4.3.5", "webpack": "^5.51.1", "webpack-cli": "^4.8.0" },

and main.js is:

`const path = require('path');

module.exports = {
stories: [
'../stories/.stories.mdx',
'../stories/
.stories.@(js|jsx|ts|tsx)',
],
addons: [
path.resolve('./.storybook/my-preset'),
'@storybook/addon-essentials',
],
core: {
builder: 'webpack5',
},
};
`

and my-preset is:

`const path = require('path');

module.exports = {
managerWebpack: async (config, options) => {
// update config here
return config;
},
managerBabel: async (config, options) => {
// update config here
return config;
},
webpackFinal: async (config, { configType }) => {
// configType has a value of 'DEVELOPMENT' or 'PRODUCTION'
// You can change the configuration based on that.
// 'PRODUCTION' is used when building the static version of storybook.

// Make whatever fine-grained changes you need

config.module.rules.push({
  test: /\.scss$/,
  use: ['lit-scss-loader', 'extract-loader', 'css-loader', 'sass-loader'],
  include: path.resolve(__dirname, '../'),
});
return config;

},
babel: async (config, options) => {
return config;
},
};
`

REPO is:
https://github.com/vikashruhilgit/UI/

@Jack-Works
Copy link

Jack-Works commented Sep 13, 2021

It seems like pmmmwh/react-refresh-webpack-plugin#308 has been closed, when can we re-enable react-refresh in webpack 5 storybooks?

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