storybook: TypeError: Cannot read property 'createSnapshot' of undefined

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

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 20
Comments: 19 (5 by maintainers)

Commits related to this issue

Installed storybook - 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 https://git... — committed to kaedroho/wagtail by kaedroho 3 years ago
Installed storybook - 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 wor... — committed to kaedroho/wagtail by kaedroho 3 years ago
Installed storybook - 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 wor... — committed to kaedroho/wagtail by kaedroho 3 years ago
Installed storybook - 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 wor... — committed to wagtail/wagtail by kaedroho 3 years ago
⬆️ Update deps and fix errors css-loader is no longer needed html-webpack-plugin seems to be necessary since webpack 5 https://github.com/storybookjs/storybook/issues/13332#issuecomment-736004964 — committed to marwinburesch/storybook-html by marwinburesch 3 years ago
Use newest html-webpack-plugin https://github.com/storybookjs/storybook/issues/13332#issuecomment-808789815 — committed to sadnessOjisan/blog.ojisan.io by sadnessOjisan 2 years ago
to fix start-storybook I installed this, but it did not help https://github.com/storybookjs/storybook/issues/13332 — committed to Mellbourn/studio-ghibli-search-engine by Mellbourn a year ago
fix: revert webpack due to storybook issue https://github.com/storybookjs/storybook/issues/13332 — committed to red-armor/relinx by ryuever 3 years ago

Most upvoted comments

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

+101

jeffgaynorspok on Nov 30, 2020

@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

+81

larsenwork on Mar 3, 2021

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.

+66

theycallmeswift on Mar 27, 2021

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

+25

shilman on Nov 30, 2020

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

+24

shilman on Mar 6, 2021

I’m experiencing this after a fresh npx sp init

+23

tzohpilotl on Dec 4, 2020

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.

+19

thany on Mar 15, 2022

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 on Mar 5, 2021

@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

jdgomezb on Mar 16, 2022

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

jeffgaynorspok on Dec 7, 2020

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 on Dec 21, 2022

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

ckwong90 on Nov 30, 2020