Storybook build fails with "Cannot find module 'webpack/lib/util/makeSerializable.js" after upgrading storybook packages to 6.3.0 #15336
Comments
|
Did you try installing Do you have a repro you can share? You can create a reproduction by running |
|
@shilman It seems that internally some storybook features still point to webpack4? Installing webpack5 with |
Haven't tried that yet.
Sorry about that, I was a bit pressed for time when I opened this. I'll take a closer look asap and see if I can create a minimal reproduction. Should be this week. I'll try adding webpack 5 as a project dependency as well at that time and report back (weird that apparently the chromatic build doesn't need webpack 5 to be set as a dependency in my project). |
|
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 |
|
Ok, I've tried to reproduce it, and in messing around with it I seem to have fixed it 'accidentally'. I've narrowed it down to changes in the I've had this before with updates to storybook, where I have to kind of install and reinstall until the package-lock settles on a combination that works 🤷♂️. I can imagine you can't do anything with this as maintainers, so apologies if it's too vague. Feel free to close this issue if it's not actionable. |
|
I can reproduce this issue with the current latest version of webpack here: Codecademy/client-modules@d45f6dc. 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 Adding webpack to the 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. EDIT : It seems to work that way :
|
|
It looks like a conflict from the version used by |
|
I can confirm @jgoux workaround for yarn-based monorepos. Only installing |
|
@tassoevan Did adding webpack in |
|
I was only able to fix this by adding this:
It seems that storybook was still trying to reference webpack 4 until I switched this toggle off. |
|
@josh-stevens which version were you using? |
|
@shilman This is in 6.3.6 Turning off docgen seems to be interfering with some other handy addons so this isn't a great workaround. |
|
@josh-stevens did you try adding webpack5 as a dev dependency in your project root? |
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. |
|
Adding Webpack5 as dev dependencies fix the issue regardless of any version of storybook |
|
this thread is really helpful @shilman Thank you. |
…ript-plugin - tl;dr : Add a resolutions field. Note that this field needs to be in the root workspace to have any effect, and so therefore must be repeated in the root package.json of both this repo and its parent monorepo. - Add a longer explanation of what happened in the .ci/chromatic.sh script, since package.json doesn't allow comments, and since the next time this breaks, it's gonna be in that file - Bump webpack to absolute cutting edge bleeding nightly super early bird - In storybook config, explicitly configure react-docgen-typescript-plugin, although I have no reason to think it made a difference - Allow specifying tsconfig file via env var TSCONFIG_FILE, default to tsconfig.json CU-qthhx6 ref storybookjs/storybook#15336 ref https://github.com/hipstersmoothie/react-docgen-typescript-plugin/blob/31ce4e84008a45269b8524157ad51bf9d191acac/package.json#L81 ref https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324
…ript-plugin - tl;dr : Add a resolutions field. Note that this field needs to be in the root workspace to have any effect, and so therefore must be repeated in the root package.json of both this repo and its parent monorepo. - Add a longer explanation of what happened in the .ci/chromatic.sh script, since package.json doesn't allow comments, and since the next time this breaks, it's gonna be in that file - Bump webpack to absolute cutting edge bleeding nightly super early bird - In storybook config, explicitly configure react-docgen-typescript-plugin, although I have no reason to think it made a difference - Allow specifying tsconfig file via env var TSCONFIG_FILE, default to tsconfig.json CU-qthhx6 ref storybookjs/storybook#15336 ref https://github.com/hipstersmoothie/react-docgen-typescript-plugin/blob/31ce4e84008a45269b8524157ad51bf9d191acac/package.json#L81 ref https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324
…ript-plugin - tl;dr : Add a resolutions field. Note that this field needs to be in the root workspace to have any effect, and so therefore must be repeated in the root package.json of both this repo and its parent monorepo. - Add a longer explanation of what happened in the .ci/chromatic.sh script, since package.json doesn't allow comments, and since the next time this breaks, it's gonna be in that file - Bump webpack to absolute cutting edge bleeding nightly super early bird - In storybook config, explicitly configure react-docgen-typescript-plugin, although I have no reason to think it made a difference - Allow specifying tsconfig file via env var TSCONFIG_FILE, default to tsconfig.json CU-qthhx6 ref storybookjs/storybook#15336 ref https://github.com/hipstersmoothie/react-docgen-typescript-plugin/blob/31ce4e84008a45269b8524157ad51bf9d191acac/package.json#L81 ref https://gist.github.com/shilman/8856ea1786dcd247139b47b270912324
THIS WORKED FOR ME! 🎉 in case anyone else wants to try this: add |
|
|
|
Can confirm the workaround. It works because for some reason this docgen thing is still using Webpack 4. Should probably get updated. |
ghost
mentioned this issue
webpack5に切り替えて実行すると以下のエラーが出る。 ``` Error: Cannot find module 'webpack/lib/util/makeSerializable.js' ``` これは、探してみると以下のissueのワークアラウンドで解決できた。 storybookjs/storybook#15336 (comment) webpack5のサポートはまだexperimentalなので仕方なさそうか…
|
If you're on a monorepo with Yarn, try this in your root package.json: |
This also works for a monorepo with nx and npm! |
This Worked. Saved alot of time. 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, In our case, it was because storybook was added to production dependencies by accident. |
|
BREAKING CHANGE:webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. next.config.js module.exports = nextConfig; |
|
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. |
- Cannot find module 'webpack/lib/util/makeSerializable.js' storybookjs/storybook#15336 - typescript: { reactDocgen: false }, It seems that storybook was still trying to reference webpack 4 until I switched this toggle off.
|
As some people mentioned before, you need to have |
This fix worked for me when adding Storybook to Turborepo. Saved me a major headache on a Friday afternoon, thanks |
|
@TomJPrice I'm facing the same issue, I installed Anything you did more? |
|
For anyone in a mono repo using
I have a mono repo, NextJS, and Storybook. |
Add that line onto with file? |
It goes into |
The solution is simply to add the following to .storybook\main.jsreactDocgen: false Example |
|
I just wanted to mention here that installing webpack5 had gotten my Storybook issue back on track.
|
You are the best!
Everything compiles well! 🥇 👍🏻 |
|
For me, switching from yarn to pnpm and adding webpack5 solved the issue for next.js. |
and others
Describe the bug
start-storybookandbuild-storybookfail withError: Cannot find module 'webpack/lib/util/makeSerializable.js'To Reproduce
See this commit: https://github.com/ismay/superwolff/commit/2ef03b79734af55c87d8b58f84422c1e1894a2c2. Chromatic tests here are unchanged, so on CI the build isn't failing. However a local npm install (even after clearing node_modules) of this commit, and running
npm run storybook:startyields the following output:System
The text was updated successfully, but these errors were encountered: