I was only able to fix this by adding this:

typescript: { reactDocgen: false },

It seems that storybook was still trying to reference webpack 4 until I switched this toggle off.

I was only able to fix this by adding this:

typescript: { reactDocgen: false },

It seems that storybook was still trying to reference webpack 4 until I switched this toggle off.

THIS WORKED FOR ME! 🎉

in case anyone else wants to try this: add typescript: { reactDocgen: false }, into module.exports inside .storybook/main.js

Did you try installing webpack5 as a project dependency?

Do you have a repro you can share? You can create a reproduction by running npx sb@next repro, following the instructions, and linking it in your issue description. We prioritize issues with reproductions over those without. Thank you! 🙏

I ran into this issue while following the NextJS + Storybook guide - https://storybook.js.org/blog/get-started-with-storybook-and-next-js/

I was able to solve it by installing webpack 5 in my dev dependencies.

In case this helps anyone, here’s what my package.json looks like:

{
  "name": "name",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "engines": {
    "node": "14.19.0"
  },
  "dependencies": {
    "next": "12.0.10",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.17.2",
    "@storybook/addon-actions": "^6.4.18",
    "@storybook/addon-essentials": "^6.4.18",
    "@storybook/addon-links": "^6.4.18",
    "@storybook/builder-webpack5": "^6.4.18",
    "@storybook/manager-webpack5": "^6.4.18",
    "@storybook/react": "^6.4.18",
    "@types/node": "17.0.16",
    "@types/react": "17.0.39",
    "babel-loader": "^8.2.3",
    "eslint": "8.8.0",
    "eslint-config-next": "12.0.10",
    "eslint-plugin-storybook": "^0.5.6",
    "typescript": "4.5.5",
    "webpack": "^5.68.0"
  }
}

Hello, we’re in the same situation. Adding webpack@5 in our dev dependencies doesn’t solve the issue for us, we still have the same error. We’re in a monorepo using yarn workspaces.

EDIT :

It seems to work that way :

• Install webpack@5 at the root of the monorepo yarn add -W -D webpack
• Add webpack: "*" in peerDependencies of your package.
• ✅

typescript: { reactDocgen: false }, it worked! 🚀

This issue is still present in @storybook/react 6.4.9 and 6.5.0-alpha.1. Using npx sb init --builder webpack5 and Next.js.

Adding Webpack5 as dev dependencies fix the issue regardless of any version of storybook

The solution is simply to add the following to .storybook\main.js

reactDocgen: false

Example

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions"
  ],
  "framework": "@storybook/react",
  "core": {
    "builder": "@storybook/builder-webpack5"
  },
  typescript: {
    reactDocgen: false
  },
}

@shilman I am facing the same issue. After manually adding webpack 5 I receive this errors in the install:

Could not resolve dependency:
npm ERR! peer webpack@"^2.0.0 || ^3.0.0 || ^4.0.0" from webpack-filter-warnings-plugin@1.2.1
npm ERR! node_modules/webpack-filter-warnings-plugin
npm ERR!   webpack-filter-warnings-plugin@"^1.2.1" from @storybook/builder-webpack4@6.3.0
npm ERR!   node_modules/@storybook/builder-webpack4
npm ERR!     @storybook/builder-webpack4@"6.3.0" from @storybook/addon-docs@6.3.0
npm ERR!     node_modules/@storybook/addon-essentials/node_modules/@storybook/addon-docs
npm ERR!       @storybook/addon-docs@"6.3.0" from @storybook/addon-essentials@6.3.0
npm ERR!       node_modules/@storybook/addon-essentials
npm ERR!     2 more (@storybook/core-server, @storybook/core-server)

It seems that internally some storybook features still point to webpack4?

Installing webpack5 with --legacy-peer-deps works. Do I still need to add the @storybook/builder-webpack5 to the addons section of main.js? This is not mentioned in the migration docs.

typescript: { reactDocgen: false }, is a BAD FIX because then you will loose Storybook Control feature.

As some people mentioned before, you need to have webpack5 dependency: npm install --save-dev webpack

~Only fix that will work with yarn berry (PnP) is if @storybook/react-docgen-typescript-plugin declares webpack 5 as a full dependency vs a peer dependency otherwise the hoisting just won’t work deterministically. I had to manually edit the yarn lock file to get this to work:~

EDIT: Here’s the addition to package.json that worked for me:

"resolutions": {
    "@storybook/core-common/webpack": "^5",
    "@storybook/core-server/webpack": "^5",
    "@storybook/react/webpack": "^5"
  }

If you’re using npm >= 8.6.0, add the following to your top-level package.json:

  "overrides": {
    "webpack": "^5"
  }

If using npm >= 8.3.0 < 8.6.0, that would also work, but you’d have to delete package-lock.json before it takes effect, this is a known bug.

w00t!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.11 containing PR #16752 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there’s still more to do.

For me nothing of this worked.

@raulvictorrosa Try @patrick-mcdougle solution, but make sure to do a clean install after you’ve added resolutions field to package.json:

rm -rf node_modules package-lock.json && npm i

If you’re on a monorepo with Yarn, try this in your root package.json:

"resolutions": {
  "webpack": "^5"
}

This did not work for me either.

Reiterating what worked for me:

  "dependencies": {
    //...
    "webpack": "^5.62.1",
    //...
  },
  "resolutions": {
    "@storybook/react/webpack": "^5"
  }

Until webpack 4 is completely out of the storybook packages this still has a chance of being hoisted wrong. OR react-docgen-typescript-plugin needs to bump the peerDependency version to >= 5.

@shilman reopen is not an option for me, so a maintainer will have to reopen this.

I was only able to fix this by adding this:

typescript: { reactDocgen: false },

It seems that storybook was still trying to reference webpack 4 until I switched this toggle off.

This works for me. Here is the complete module.exports in .storybook/main.js

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
  "core": {
    "builder": "webpack5"
  },
  "typescript": { "reactDocgen": false }
}

Isn’t this line the root of the problem?: https://github.com/storybookjs/storybook/blob/main/addons/docs/src/frameworks/common/preset.ts#L9

I’m not too familiar with storybooks code base, but to me this looks like it is always using webpack4 for docs. Also it says “fixme”… But as long as this is the case I don’t think storybook can be listed as being fully compatible with yarn pnp. Unfortunately it also looks like there’s no workaround other than not using pnp at all.

Edit: Found out you can put webpack 5 into the resolutions in package.json. This causes half a million errors in the console, but the end result appears to be working fine regardless 😮

I can confirm @jgoux workaround for yarn-based monorepos. Only installing webpack@5 at the root workspace did it for me.

It isn’t fully solving the issue actually, now if I install new deps, I have the error again. I need to wipe all my monorepo node_modules folders and install from scratch to make the error disappear, it’s quite annoying.

I just wanted to mention here that installing webpack5 had gotten my Storybook issue back on track. I used this code, we’re running storybook.js with React.

npm i -D webpack@^5.x.x

Thanks @patrick-mcdougle !!! 🙏 Continuing the conversation on the PR

Edit: The error only started appearing for me after switching to Yarn’s Plug’n’Play and I’ve only been using Webpack 5 in the project (not just for storybook but also for the normal build process and yes it’s listed as a dependency). The workaround of installing webpack 5 will make it hoisted but it won’t work if you’re using Yarn’s pnp. Yarn also complains about @storybook/core not declaring its peer dependencies on babel and webpack so that’s probably related.

For anyone in a mono repo using pnpm, I was able to fix it with:

1. Delete all node_modules from root, find . -name 'node_modules' -type d -prune -exec rm -rf '{}' +
2. Reinstall all packages from root, pnpm i

I have a mono repo, NextJS, and Storybook.

yup, thanks @quantran020173 and @mdirshaddev. yarn add webpack@5 --dev worked like a charm.

I can confirm @jgoux workaround for yarn-based monorepos. Only installing webpack@5 at the root workspace did it for me.

It looks like a conflict from the version used by @storybook/react-docgen-typescript-plugin. Here’s the resolution from yarn that spawned the same error for me:

 @storybook/react@npm:6.3.1
└─ @storybook/react-docgen-typescript-plugin@npm:1.0.2-canary.3c70e01.0 (via npm:1.0.2-canary.3c70e01.0)

I can reproduce this issue with the current latest version of webpack here: https://github.com/Codecademy/client-modules/pull/1404/commits/d45f6dca52db943b653b9ddb639915ee8bd28df3. Sorry the reproduction is so complex; it’s the only one I’ve got 😉 .

The CircleCI builds are private but you can clone the repository locally, build all packages, and yarn start to reproduce:

git clone https://github.com/Codecademy/client-modules
git checkout d45f6dca52db943b653b9ddb639915ee8bd28df3
cd client-modules
yarn
yarn lerna bootstrap
yarn build-all
yarn start

Adding webpack to the devDependencies in packages/styleguide/package.json indeed resolves the crash: https://github.com/Codecademy/client-modules/pull/1404/commits/1d4780d2b6f55144599da1aeddab9aebce18cb85

The offending lines of code were a chuckle:

// eslint-disable-next-line
// @ts-ignore: What's the right way to refer to this one?
const makeSerializable_js_1 = tslib_1.__importDefault(require("webpack/lib/util/makeSerializable.js"));
// eslint-disable-next-line
// @ts-ignore: What's the right way to refer to this one?
const NullDependency_js_1 = tslib_1.__importDefault(require("webpack/lib/dependencies/NullDependency.js"));

Hello, we’re in the same situation. Adding webpack@5 in our dev dependencies doesn’t solve the issue for us, we still have the same error. We’re in a monorepo using yarn workspaces.

EDIT :

It seems to work that way :

• Install webpack@5 at the root of the monorepo yarn add -W -D webpack
• Add webpack: "*" in peerDependencies of your package.
• ✅

This fix worked for me when adding Storybook to Turborepo. Saved me a major headache on a Friday afternoon, thanks

If you’re running into this, it may be because a package is in your production dependencies that also depends on webpack 4 directly. If you’re on yarn, yarn why may help explain why webpack4 is being hoisted still.

In our case, it was because storybook was added to production dependencies by accident.

If you’re on a monorepo with Yarn, try this in your root package.json:

"resolutions": {
  "webpack": "^5"
}

This also works for a monorepo with nx and npm!

Olé!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.14 containing PR #17192 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

I just did it and the issue persist 😦

"dependencies": {
    "@reduxjs/toolkit": "^1.7.1",
    "axios": "^0.24.0",
    "bootstrap": "^5.1.3",
    "clsx": "^1.1.1",
    "next": "12.0.4",
    "react": "17.0.2",
    "react-bootstrap": "^2.0.2",
    "react-dom": "17.0.2",
    "react-query": "^3.34.0",
    "react-redux": "^7.2.6",
    "sass": "^1.43.5"
  },
  "devDependencies": {
    "@babel/core": "^7.16.7",
    "@storybook/addon-actions": "^6.5.0-alpha.14",
    "@storybook/addon-essentials": "^6.5.0-alpha.14",
    "@storybook/addon-links": "^6.5.0-alpha.14",
    "@storybook/builder-webpack5": "^6.5.0-alpha.14",
    "@storybook/manager-webpack5": "^6.5.0-alpha.14",
    "@storybook/react": "^6.5.0-alpha.14",
    "@types/node": "16.11.10",
    "@types/react": "^17.0.37",
    "babel-loader": "^8.2.3",
    "eslint": "7",
    "eslint-config-next": "12.0.4",
    "eslint-plugin-storybook": "^0.5.5",
    "prettier": "^2.5.1",
    "typescript": "4.5.2"
  }

UPDATE I had to install webpack5 on devDependencies.

Olé!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.14 containing PR #17192 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

This works for me but what is the impact of doing this? And should this not have been fixed in v6.4?

Disabling reactDocgen means that it will no longer be able to automatically infer your props from your component, so you’d have to manually tell storybook about each prop and their type.

I was only able to fix this by adding this:

typescript: { reactDocgen: false },

It seems that storybook was still trying to reference webpack 4 until I switched this toggle off.

This solved the issue !

I think this issue is still present. I upgraded to 6.4.0 and I’m still getting the same error. Here is a reproduction repo; just run yarn sb to see the error.

I see, so need to add a switch detecting which builder we’re on… On it!

@thedavidprice that’s wonderful news! 🙌 if you come across any learnings that should be incorporated on the storybook side, please share. and congrats on the big upcoming release!

I had the same issue from 6.29 (using npx sb init --builder webpack5 -f to install few weeks back) to 6.3. Upgrading to latest webpack fixed