search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
83.93k stars 9.21k forks source link

TypeError: Cannot read property 'createSnapshot' of undefined #13332

Closed jimmyandrade closed 3 years ago

jimmyandrade commented 3 years ago

When I start storybook, I got TypeError: Cannot read property 'createSnapshot' of undefined error.

I tried to fix this:

To Reproduce

Working with https://github.com/FacioCode/design/tree/main/packages/react-storybook

  1. Install all dependencies;
  2. At packages/react-storybook, run npm start
  3. See the following error:
> @faciocode/react-storybook@0.18.0 start
> start-storybook -c ./src -p 9009

info @storybook/react v6.1.3
info 
info => Loading presets
info => Loading presets
info => Loading 1 config file in "./src"
info => Loading 2 other files in "./src"
info => Adding stories defined in "src/main.js"
node_modules/html-webpack-plugin/lib/webpack5/file-watcher-api.js:13
    mainCompilation.fileSystemInfo.createSnapshot(
                                   ^

TypeError: Cannot read property 'createSnapshot' of undefined
    at node_modules/html-webpack-plugin/lib/webpack5/file-watcher-api.js:13:36
    at new Promise (<anonymous>)
    at Object.createSnapshot (node_modules/html-webpack-plugin/lib/webpack5/file-watcher-api.js:12:10)
    at node_modules/html-webpack-plugin/lib/cached-child-compiler.js:219:35
npm ERR! code 1
npm ERR! path packages/react-storybook
npm ERR! command failed

Process finished with exit code 1

Expected behavior

No errors should appear.

System

Environment Info:

  System:
    OS: macOS 11.0.1
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
  Binaries:
    Node: 15.0.1 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.0.3 - /usr/local/bin/npm
  Browsers:
    Firefox: 83.0
    Safari: 14.0.1
  npmPackages:
    @storybook/addon-docs: 6.1.3 => 6.1.3 
    @storybook/react: 6.1.3 => 6.1.3

When I ran npm ls webpack with 6.1.3, I got this:

├─┬ @storybook/addon-docs@6.1.9
│ ├─┬ @storybook/core@6.1.9
│ │ ├─┬ css-loader@3.6.0
│ │ │ └── webpack@5.9.0 deduped
│ │ ├─┬ dotenv-webpack@1.8.0
│ │ │ └── webpack@4.44.2 deduped
│ │ ├─┬ file-loader@6.2.0
│ │ │ └── webpack@5.9.0 deduped
│ │ ├─┬ html-webpack-plugin@4.5.0
│ │ │ └── webpack@5.9.0 deduped
│ │ ├─┬ raw-loader@4.0.2
│ │ │ └── webpack@5.9.0 deduped
│ │ ├─┬ style-loader@1.3.0
│ │ │ └── webpack@5.9.0 deduped
│ │ ├─┬ terser-webpack-plugin@3.1.0
│ │ │ └── webpack@5.9.0 deduped
│ │ ├─┬ url-loader@4.1.1
│ │ │ └── webpack@5.9.0 deduped
│ │ ├─┬ webpack-dev-middleware@3.7.2
│ │ │ └── webpack@4.44.2 deduped
│ │ ├─┬ webpack-filter-warnings-plugin@1.2.1
│ │ │ └── webpack@4.44.2 deduped
│ │ └─┬ webpack@4.44.2
│ │   └─┬ terser-webpack-plugin@1.4.5
│ │     └── webpack@4.44.2 deduped
│ ├─┬ babel-loader@8.2.2
│ │ └── webpack@5.9.0 deduped
│ └─┬ webpack@5.9.0
│   └─┬ terser-webpack-plugin@5.0.3
│     └── webpack@5.9.0 deduped
└─┬ @storybook/react@6.1.9
  ├─┬ @pmmmwh/react-refresh-webpack-plugin@0.4.3
  │ └── webpack@5.9.0 deduped
  ├─┬ react-docgen-typescript-plugin@0.6.2
  │ └─┬ react-docgen-typescript-loader@3.7.2
  │   └─┬ @webpack-contrib/schema-utils@1.0.0-beta.0
  │     └─┬ webpack@4.44.2
  │       └─┬ terser-webpack-plugin@1.4.5
  │         └── webpack@4.44.2 deduped
  └─┬ webpack@4.44.2
    └─┬ terser-webpack-plugin@1.4.5
      └── webpack@4.44.2 deduped
ckwong90 commented 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

shilman commented 3 years ago

Looks like you are using something from webpack5, which is not yet supported by Storybook. Closing as dupe to #9216

jeffgaynorspok commented 3 years ago

@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.

tzohpilotl commented 3 years ago

I'm experiencing this after a fresh npx sp init

jimmyandrade commented 3 years ago

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
jeffgaynorspok commented 3 years ago

@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.

larsenwork commented 3 years ago

@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
shaktals commented 3 years ago

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!!

shilman commented 3 years ago

@shaktals try running npm with --legacy-peer-deps

shaktals commented 3 years ago

@shilman worked like a charm, thanks man!

fabpico commented 3 years ago

@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.

theycallmeswift commented 3 years ago

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.

larry-noriega commented 2 years ago

@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.

mgcrea commented 2 years ago

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.

thany commented 2 years ago

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.

jdgomezb commented 2 years ago

@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

sambunting commented 1 year ago

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.

sambunting commented 1 year ago

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",
Neonikz commented 1 year 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

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