Skip to content

Instantly share code, notes, and snippets.

@shilman
Last active June 26, 2023 12:56
Show Gist options
  • Save shilman/8856ea1786dcd247139b47b270912324 to your computer and use it in GitHub Desktop.
Save shilman/8856ea1786dcd247139b47b270912324 to your computer and use it in GitHub Desktop.
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.

@gmirmand
Copy link

gmirmand commented Sep 16, 2022

@shilman after following all the instructions I get the following error -

╰─      yarn storybook                                                                                           ─╯
yarn run v1.22.10
$ start-storybook -p 6006 -s public
/bin/sh: start-storybook: command not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Same here.
I was using Webpack4 & Storybook6.5
I moved my project to webpack5 so i've done the migration steps for storybook

npx sb@next upgrade --prerelease
npm i -D @storybook/builder-webpack5@next @storybook/manager-webpack5@next webpack@5
and add

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

But when I npm run storybook (start-storybook -p 6006 --no-dll) i get sh: start-storybook: command not found

@gmirmand
Copy link

gmirmand commented Sep 16, 2022

Even based on a clean install it's doesn't work..

I run npx sb@next init --builder webpack5 in a empty folder
Choose vue (not vue3)

and on npm run storybook i get

> start-storybook -p 6006

info @storybook/vue v6.5.12
info 
info => Loading presets
ERR! Error: Cannot find module 'vue/dist/vue.esm.js'
ERR! Require stack:
ERR! - <project-path>/node_modules/@storybook/vue/dist/cjs/server/framework-preset-vue.js
ERR! - <project-path>/node_modules/@storybook/core-common/dist/cjs/presets.js
ERR! - <project-path>/node_modules/@storybook/core-common/dist/cjs/index.js
ERR! - <project-path>/node_modules/@storybook/core-server/dist/cjs/index.js
ERR! - <project-path>/node_modules/@storybook/core/dist/cjs/server.js
ERR! - <project-path>/node_modules/@storybook/core/server.js
ERR! - <project-path>/node_modules/@storybook/vue/dist/cjs/server/index.js
ERR! - <project-path>/node_modules/@storybook/vue/bin/index.js
ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
ERR!     at Function.resolve (internal/modules/cjs/helpers.js:99:19)
ERR!     at Object.webpack (<project-path>/node_modules/@storybook/vue/dist/cjs/server/framework-preset-vue.js:53:19)
ERR!     at async starterGeneratorFn (<project-path>/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:116:16)
ERR!     at async Object.start (<project-path>/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:272:14)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (<project-path>/node_modules/@storybook/core-server/dist/cjs/dev-server.js:207:28)
ERR!     at async buildDevStandalone (<project-path>/node_modules/@storybook/core-server/dist/cjs/build-dev.js:120:31)
ERR!     at async buildDev (<project-path>/node_modules/@storybook/core-server/dist/cjs/build-dev.js:174:5)
ERR!  Error: Cannot find module 'vue/dist/vue.esm.js'
ERR! Require stack:
ERR! - <project-path>/node_modules/@storybook/vue/dist/cjs/server/framework-preset-vue.js
ERR! - <project-path>/node_modules/@storybook/core-common/dist/cjs/presets.js
ERR! - <project-path>/node_modules/@storybook/core-common/dist/cjs/index.js
ERR! - <project-path>/node_modules/@storybook/core-server/dist/cjs/index.js
ERR! - <project-path>/node_modules/@storybook/core/dist/cjs/server.js
ERR! - <project-path>/node_modules/@storybook/core/server.js
ERR! - <project-path>/node_modules/@storybook/vue/dist/cjs/server/index.js
ERR! - <project-path>/node_modules/@storybook/vue/bin/index.js
ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
ERR!     at Function.resolve (internal/modules/cjs/helpers.js:99:19)
ERR!     at Object.webpack (<project-path>/node_modules/@storybook/vue/dist/cjs/server/framework-preset-vue.js:53:19)
ERR!     at async starterGeneratorFn (<project-path>/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:116:16)
ERR!     at async Object.start (<project-path>/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:272:14)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (<project-path>/node_modules/@storybook/core-server/dist/cjs/dev-server.js:207:28)
ERR!     at async buildDevStandalone (<project-path>/node_modules/@storybook/core-server/dist/cjs/build-dev.js:120:31)
ERR!     at async buildDev (<project-path>/node_modules/@storybook/core-server/dist/cjs/build-dev.js:174:5) {
ERR!   code: 'MODULE_NOT_FOUND',
ERR!   requireStack: [
ERR!     '<project-path>/node_modules/@storybook/vue/dist/cjs/server/framework-preset-vue.js',
ERR!     '<project-path>/node_modules/@storybook/core-common/dist/cjs/presets.js',
ERR!     '<project-path>/node_modules/@storybook/core-common/dist/cjs/index.js',
ERR!     '<project-path>/node_modules/@storybook/core-server/dist/cjs/index.js',
ERR!     '<project-path>/node_modules/@storybook/core/dist/cjs/server.js',
ERR!     '<project-path>/node_modules/@storybook/core/server.js',
ERR!     '<project-path>/node_modules/@storybook/vue/dist/cjs/server/index.js',
ERR!     '<project-path>/node_modules/@storybook/vue/bin/index.js'
ERR!   ]
ERR! }

@eladgoeuro
Copy link

eladgoeuro commented Jan 18, 2023

TypeScript code is not recognized after I did the upgrade (getting SyntaxError)

odule build failed (from ./.yarn/__virtual__/babel-loader-virtual-cf6f5f4d38/0/cache/babel-loader-npm-9.1.2-a76340cb80-f0edb8e157.zip/node_modules/babel-loader/lib/index.js):
ERR! SyntaxError: /Users/elcohen/prisma/ciem-jit-ui/src/components/ErrorPage/ErrorPage.stories.tsx: Unexpected token, expected "from" (2:12)
ERR!
ERR!   1 | // import { action } from "@storybook/addon-actions";
ERR! > 2 | import type { ReactElement } from "react";
ERR!     |             ^
ERR!   3 | import { ErrorPage } from "./ErrorPage";
ERR!   4 | export default {
ERR!   5 |   component: ErrorPage,
ERR!     at instantiate (/Users/elcohen/prisma/ciem-jit-ui/.yarn/cache/@babel-parser-npm-7.20.7-3710a9bc4f-25b5266e3b.zip/node_modules/@babel/parser/lib/index.js:66:32)
ERR!     at constructor (/Users/elcohen/prisma/ciem-jit-ui/.yarn/cache/@babel-parser-npm-7.20.7-3710a9bc4f-25b5266e3b.zip/node_modules/@babel/parser/lib/index.js:357:12)
ERR!     at JSXParserMixin.raise (/Users/elcohen/prisma/ciem-jit-ui/.yarn/cache/@babel-parser-npm-7.20.7-3710a9bc4f-25b5266e3b.zip/node_modules/@babel/parser/lib/index.js:3298:19)

@bigbunty
Copy link

hi

TypeScript code is not recognized after I did the upgrade (getting SyntaxError)

odule build failed (from ./.yarn/__virtual__/babel-loader-virtual-cf6f5f4d38/0/cache/babel-loader-npm-9.1.2-a76340cb80-f0edb8e157.zip/node_modules/babel-loader/lib/index.js):
ERR! SyntaxError: /Users/elcohen/prisma/ciem-jit-ui/src/components/ErrorPage/ErrorPage.stories.tsx: Unexpected token, expected "from" (2:12)
ERR!
ERR!   1 | // import { action } from "@storybook/addon-actions";
ERR! > 2 | import type { ReactElement } from "react";
ERR!     |             ^
ERR!   3 | import { ErrorPage } from "./ErrorPage";
ERR!   4 | export default {
ERR!   5 |   component: ErrorPage,
ERR!     at instantiate (/Users/elcohen/prisma/ciem-jit-ui/.yarn/cache/@babel-parser-npm-7.20.7-3710a9bc4f-25b5266e3b.zip/node_modules/@babel/parser/lib/index.js:66:32)
ERR!     at constructor (/Users/elcohen/prisma/ciem-jit-ui/.yarn/cache/@babel-parser-npm-7.20.7-3710a9bc4f-25b5266e3b.zip/node_modules/@babel/parser/lib/index.js:357:12)
ERR!     at JSXParserMixin.raise (/Users/elcohen/prisma/ciem-jit-ui/.yarn/cache/@babel-parser-npm-7.20.7-3710a9bc4f-25b5266e3b.zip/node_modules/@babel/parser/lib/index.js:3298:19)

I am also getting this error with Storybook 7 migration from v6. Any solution for this issue?

@azangru
Copy link

azangru commented Jun 26, 2023

Will a .babelrc in the .storybook folder with the following content help?

{
  "presets": [
    "@babel/react",
    "@babel/typescript"
  ]
}

(also, what's in your main.js inside .storybook)?

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