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

jimmyandrade · 2020-11-30T00:37:07Z

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

I tried to fix this:

With @storybook/addon-docs and @storybook/react version 6.1.3. Didn't work;
With @storybook/addon-docs and @storybook/react version 6.1.9. Didn't work;

To Reproduce

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

Install all dependencies;
At packages/react-storybook, run npm start
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

The text was updated successfully, but these errors were encountered:

ckwong90 · 2020-11-30T09:33:39Z

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 · 2020-11-30T15:00:28Z

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

jeffgaynorspok · 2020-11-30T19:52:57Z

@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 · 2020-12-04T17:29:35Z

I'm experiencing this after a fresh npx sp init

jimmyandrade · 2020-12-05T14:25:27Z

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 · 2020-12-07T16:12:14Z

@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 · 2021-03-03T10:08:07Z

@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 · 2021-03-05T19:34:34Z

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 · 2021-03-06T03:07:15Z

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

shaktals · 2021-03-06T10:04:42Z

@shilman worked like a charm, thanks man!

fabpico · 2021-03-08T11:02:12Z

@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 · 2021-03-27T19:23:21Z

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.

- Run `npx -p @storybook/cli sb init --type react` - Moved .storybook and stories folders into client - Run `npm i --save-dev html-webpack-plugin@latest` to workaround storybookjs/storybook#13332 - Add storybook-static to .gitignore

- Run `npx -p @storybook/cli sb init --type react --builder webpack5` - Moved .storybook and stories folders into client - Run `npm i --save-dev html-webpack-plugin@latest` to workaround storybookjs/storybook#13332 - Add storybook-static to .gitignore

css-loader is no longer needed html-webpack-plugin seems to be necessary since webpack 5 storybookjs/storybook#13332 (comment)

larry-noriega · 2021-12-30T02:55:56Z

@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 · 2022-01-21T10:16:02Z

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 · 2022-03-15T14:37:35Z

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 · 2022-03-16T16:22:52Z

@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

storybookjs/storybook#13332 (comment)

sambunting · 2022-12-21T14:46:52Z

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 · 2022-12-21T15:23:53Z

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",

storybookjs/storybook#13332

Neonikz · 2023-03-27T22:58:00Z

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

jimmyandrade added bug typescript configuration babel / webpack labels Nov 30, 2020

shilman closed this as completed Nov 30, 2020

ChangHyun2 mentioned this issue Feb 1, 2021

[solved] storybook is not work with webpack 5 ChangHyun2/emotion-storybook-boilerplate#1

Closed

pocka mentioned this issue Apr 2, 2021

Unexpected 'Compiling RuleSet failed: Properties query are unknown' error with Vue 2 in a Laravel project #14300

Closed

daviddelusenet mentioned this issue Apr 8, 2021

Webpack v5 Upgrade - start-storybook works but build-storybook fails #13893

Open

johanvanhelden mentioned this issue Apr 12, 2021

[6.2.7] [Webpack 5] [Laravel] [Vue] Cannot GET / #14565

Closed

marwinburesch added a commit to marwinburesch/storybook-html that referenced this issue Jul 12, 2021

⬆️ Update deps and fix errors

b2de56d

css-loader is no longer needed html-webpack-plugin seems to be necessary since webpack 5 storybookjs/storybook#13332 (comment)

This was referenced Jul 12, 2021

⬆️ Update deps and fix errors marwinburesch/storybook-html#1

Closed

⬆️ Update deps lmachens/storybook-html#7

Closed

drew-patel mentioned this issue Jul 28, 2022

chore(3iD): Fix webpack version mismatch due to expo-cli proofzero/rollupid#620

Merged

8 tasks

ScottMcDermid mentioned this issue Oct 7, 2022

Repair Storybook Script PayButton/paybutton#171

Merged

sadnessOjisan added a commit to sadnessOjisan/blog.ojisan.io that referenced this issue Oct 8, 2022

Use newest html-webpack-plugin

1cd43a1

storybookjs/storybook#13332 (comment)

VincentHardouin mentioned this issue Dec 1, 2022

[TECH] Mettre à jour ember-source vers la 4.0.1 (PIX-6462). 1024pix/pix-ui#292

Merged

sumicet mentioned this issue Dec 13, 2022

[Bug]: Vite builder for storybook fails to build in Vite + TS + React project in Node 18 #20209

Closed

Mellbourn added a commit to Mellbourn/studio-ghibli-search-engine that referenced this issue Feb 22, 2023

to fix start-storybook I installed this, but it did not help

49ee396

storybookjs/storybook#13332

benelan mentioned this issue Dec 28, 2023

build(storybook): resolve error due to webpack dependency conflicts Esri/calcite-design-system#8511

Merged

ryuever added a commit to red-armor/relinx that referenced this issue Feb 25, 2024

fix: revert webpack due to storybook issue storybookjs/storybook#13332

ef68e8d

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

jimmyandrade commented Nov 30, 2020 •

edited

ckwong90 commented Nov 30, 2020

shilman commented Nov 30, 2020

jeffgaynorspok commented Nov 30, 2020

tzohpilotl commented Dec 4, 2020

jimmyandrade commented Dec 5, 2020

jeffgaynorspok commented Dec 7, 2020

larsenwork commented Mar 3, 2021

shaktals commented Mar 5, 2021 •

edited

shilman commented Mar 6, 2021

shaktals commented Mar 6, 2021

fabpico commented Mar 8, 2021

theycallmeswift commented Mar 27, 2021

larry-noriega commented Dec 30, 2021

mgcrea commented Jan 21, 2022

thany commented Mar 15, 2022 •

edited

jdgomezb commented Mar 16, 2022

sambunting commented Dec 21, 2022

sambunting commented Dec 21, 2022 •

edited

Neonikz commented Mar 27, 2023

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

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

Comments

jimmyandrade commented Nov 30, 2020 • edited

ckwong90 commented Nov 30, 2020

shilman commented Nov 30, 2020

jeffgaynorspok commented Nov 30, 2020

tzohpilotl commented Dec 4, 2020

jimmyandrade commented Dec 5, 2020

jeffgaynorspok commented Dec 7, 2020

larsenwork commented Mar 3, 2021

shaktals commented Mar 5, 2021 • edited

shilman commented Mar 6, 2021

shaktals commented Mar 6, 2021

fabpico commented Mar 8, 2021

theycallmeswift commented Mar 27, 2021

larry-noriega commented Dec 30, 2021

mgcrea commented Jan 21, 2022

thany commented Mar 15, 2022 • edited

jdgomezb commented Mar 16, 2022

sambunting commented Dec 21, 2022

sambunting commented Dec 21, 2022 • edited

Neonikz commented Mar 27, 2023

jimmyandrade commented Nov 30, 2020 •

edited

shaktals commented Mar 5, 2021 •

edited

thany commented Mar 15, 2022 •

edited

sambunting commented Dec 21, 2022 •

edited