Closed jimmyandrade closed 3 years ago
I have this error too... apparently when "html-webpack-plugin" is installed, storybook doesn't start. I removed it and storybook works fine. It also conflicts with react-refresh-webpack-plugin. Maybe storybook doesn't play nice when any webpack plugin is installed on its own
Looks like you are using something from webpack5, which is not yet supported by Storybook. Closing as dupe to #9216
@shilman @jimmyandrade @ckwong90
For this issue in particular, you can install the Webpack 5 compatible version of the problem plugin:
npm i --save-dev html-webpack-plugin@next
See https://github.com/jantimon/html-webpack-plugin. It's an alpha version, but Storybook builds fine after doing so.
I'm experiencing this after a fresh npx sp init
npm i --save-dev html-webpack-plugin@next
@jeffgaynorspok tranks. I tried this, but I got the following:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: html-webpack-plugin@4.5.0
npm ERR! node_modules/html-webpack-plugin
npm ERR! html-webpack-plugin@"^4.2.1" from @storybook/core@6.1.10
npm ERR! node_modules/@storybook/core
npm ERR! @storybook/core@"6.1.10" from @storybook/addon-docs@6.1.10
npm ERR! node_modules/@storybook/addon-docs
npm ERR! dev @storybook/addon-docs@"6.1.10" from the root project
npm ERR! @storybook/core@"6.1.10" from @storybook/react@6.1.10
npm ERR! node_modules/@storybook/react
npm ERR! dev @storybook/react@"6.1.10" from the root project
npm ERR! dev html-webpack-plugin@"^5.0.0-alpha.15" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev html-webpack-plugin@"^5.0.0-alpha.15" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: webpack@5.10.0
npm ERR! node_modules/webpack
npm ERR! peer webpack@"^5.1.2" from html-webpack-plugin@5.0.0-alpha.15
npm ERR! node_modules/html-webpack-plugin
npm ERR! dev html-webpack-plugin@"^5.0.0-alpha.15" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/jimmyandrade/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/jimmyandrade/.npm/_logs/2020-12-05T14_24_27_116Z-debug.log
Process finished with exit code 1
@jimmyandrade Have your tried trashing your node_modules and package-lock.json, then run npm i
? If that doesn't help...
What version of @story"@storybook/react
are you on? What version of webpack
? Might be easiest to see your package.json.
@shilman @jimmyandrade @ckwong90
For this issue in particular, you can install the Webpack 5 compatible version of the problem plugin:
npm i --save-dev html-webpack-plugin@next
See https://github.com/jantimon/html-webpack-plugin. It's an alpha version, but Storybook builds fine after doing so.
FWIW this is now the @latest
version so @next
doesn't exist anymore - just use:
npm i --save-dev html-webpack-plugin
What up!
I started a fresh new gatsby public project and tried to install storybook and then bumped into this issue.
Installing html-webpack-plugin
doesn't seem to solve it.
While on the setup-storybook
branch of my project, I tried deleting node_modules
and package-lock.json
, then npm i
, but Gatsby is using React 17.0.1 now, so it yielded a dependency conflict. Gatsby_storybook_conflict.txt
I checked out master
branch, ran npm i
, and it worked.
Checked out setup-storybook
, ran npm i
again, and now it works fine.
But trying npm run storybook
yields the same error still:
TypeError: Cannot read property 'createSnapshot' of undefined
I tried to play around using previous package versions, but no progress. Anyone has any insight to share? Thanks!!
@shaktals try running npm with --legacy-peer-deps
@shilman worked like a charm, thanks man!
@shilman @jimmyandrade @ckwong90
For this issue in particular, you can install the Webpack 5 compatible version of the problem plugin:
npm i --save-dev html-webpack-plugin@next
See https://github.com/jantimon/html-webpack-plugin. It's an alpha version, but Storybook builds fine after doing so.
I had webpack installed with version definition ^5.18.0
but with command npm i --save-dev html-webpack-plugin@next
i received error:
npm ERR! code ETARGET
npm ERR! notarget No matching version found for html-webpack-plugin@next.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
After that i found this thread, so i found out that npm ls webpack
showed me webpack 4.x stuff, so i downgraded my webpack to v4 with ^4
, then i was able to start storybook.
FYI I ran a completely fresh storybook install just now and encountered this same problem (@storybook/react": "^6.1.21"). To fix the problem I had to explicitly install html-webpack-plugin
at a version >= 5.0.0.
@shilman @jimmyandrade @ckwong90 For this issue in particular, you can install the Webpack 5 compatible version of the problem plugin:
npm i --save-dev html-webpack-plugin@next
See https://github.com/jantimon/html-webpack-plugin. It's an alpha version, but Storybook builds fine after doing so.
FWIW this is now the
@latest
version so@next
doesn't exist anymore - just use:npm i --save-dev html-webpack-plugin
Works perfectly fine for me. I've realized that each time that a function or variable is not reading properly, means itself the following: "Update that module please."
Thanks again.
Just encountered this as well from bumping from 6.4.10
to 6.4.14
, with npm, tried to delete the package-lock.json file but did not fix it. Manually adding html-webpack-plugin
as a dep fixed it.
Just encountered this after updating from 6.4.10 to 6.4.19.
This bug should be fixed on Storybook's end. This is not a configuration problem on our ends, as far as I can tell. Here's why:
npm i --save-dev html-webpack-plugin
This fixes the problem, right? Wrong. It works around the problem. When I now delete the dependency from my package.json
and run npm i
, running Storybook still works.
This is proof that the problem is in Storybook, because after this excercise, my config is identical to before the workaround. Sure, my package-lock.json
has changed, but that's just further proof (to me at least) that a dependency in Storybook is misconfigured or missing.
Long story short, @shilman, if this package html-webpack-plugin
is required for Storybook to function properly, please add it into Storybook's own dependencies and use that, instead of relying on it being installed locally through either an explicit dependency in package.json
, or an implicit one mandated by package-lock.json
.
@shilman @jimmyandrade @ckwong90 For this issue in particular, you can install the Webpack 5 compatible version of the problem plugin:
npm i --save-dev html-webpack-plugin@next
See https://github.com/jantimon/html-webpack-plugin. It's an alpha version, but Storybook builds fine after doing so.
FWIW this is now the
@latest
version so@next
doesn't exist anymore - just use:npm i --save-dev html-webpack-plugin
Yes, this fixed my issue and I was able to launch storybook again. Thanks
I seem to be having the same issue too on @storybook/react@6.5.14
. But even when I run npm i --save-dev html-webpack-plugin
- It still gives me the same error.
Only thing that I can think of is that I'm using a monorepo, but I'm not totally confident that's the issue.
Ok. I think I might have fixed it... What I've done is pinned the dependencies for any @storybook/
package, and also @babel/core
. Then deleting node_modules
and package-lock.json
and running npm install
again seems to work for me. It could just be down to some version mismatch.
For reference, my current versions are:
"@babel/core": "7.20.5",
"@storybook/addon-actions": "6.5.14",
"@storybook/addon-coverage": "0.0.7",
"@storybook/addon-essentials": "6.5.14",
"@storybook/addon-interactions": "6.5.14",
"@storybook/addon-links": "6.5.14",
"@storybook/builder-webpack4": "6.5.14",
"@storybook/manager-webpack4": "6.5.14",
"@storybook/react": "6.5.14",
"@storybook/test-runner": "0.9.2",
"@storybook/testing-library": "0.0.13",
I have this error too... apparently when "html-webpack-plugin" is installed, storybook doesn't start. I removed it and storybook works fine. It also conflicts with react-refresh-webpack-plugin. Maybe storybook doesn't play nice when any webpack plugin is installed on its own
LOL i tried your solution and it didn't work but when i reinstall html-webpack-plugin it works! i think that it's weird because 5 minutes ago i did the npm i
When I start storybook, I got
TypeError: Cannot read property 'createSnapshot' of undefined
error.I tried to fix this:
@storybook/addon-docs
and@storybook/react
version6.1.3
. Didn't work;@storybook/addon-docs
and@storybook/react
version6.1.9
. Didn't work;To Reproduce
Working with https://github.com/FacioCode/design/tree/main/packages/react-storybook
packages/react-storybook
, runnpm start
Expected behavior
No errors should appear.
System
When I ran
npm ls webpack
with6.1.3
, I got this: