ERR! Error: Cannot find module 'html-webpack-plugin' in Storybook after upgrading to Cypress v10

Current behavior

After upgrading to Cypress v.10 and @cypress/webpack-dev-server@^2.0.0, now Storybook throws the following error:

Run yarn storybook:build
yarn run v1.22.19
$ build-storybook -o ./out/storybook
info @storybook/react v6.5.9
info 
info => Cleaning outputDir: /home/runner/work/vision-prototype/vision-prototype/out/storybook
info => Loading presets
WARN   Failed to load preset: "/home/runner/work/vision-prototype/vision-prototype/node_modules/@storybook/manager-webpack5/dist/cjs/presets/manager-preset.js"
ERR! Error: Cannot find module 'html-webpack-plugin'
ERR! Require stack:
ERR! - /home/runner/work/vision-prototype/vision-prototype/node_modules/@storybook/manager-webpack5/dist/cjs/presets/manager-preset.js
ERR! - /home/runner/work/vision-prototype/vision-prototype/node_modules/@storybook/core-common/dist/cjs/presets.js
ERR! - /home/runner/work/vision-prototype/vision-prototype/node_modules/@storybook/core-common/dist/cjs/index.js
ERR! - /home/runner/work/vision-prototype/vision-prototype/node_modules/@storybook/core-server/dist/cjs/index.js
ERR! - /home/runner/work/vision-prototype/vision-prototype/node_modules/@storybook/core/dist/cjs/server.js
ERR! - /home/runner/work/vision-prototype/vision-prototype/node_modules/@storybook/core/server.js
ERR! - /home/runner/work/vision-prototype/vision-prototype/node_modules/@storybook/react/dist/cjs/server/build.js
ERR! - /home/runner/work/vision-prototype/vision-prototype/node_modules/@storybook/react/bin/build.js
ERR!     at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
ERR!     at Function.Module._load (node:internal/modules/cjs/loader:77[8](https://github.com/Design-Commerce-Technology/vision-prototype/runs/7046605928?check_suite_focus=true#step:7:9):27)
ERR!     at Module.require (node:internal/modules/cjs/loader:1005:1[9](https://github.com/Design-Commerce-Technology/vision-prototype/runs/7046605928?check_suite_focus=true#step:7:10))
ERR!     at require (node:internal/modules/cjs/helpers:[10](https://github.com/Design-Commerce-Technology/vision-prototype/runs/7046605928?check_suite_focus=true#step:7:11)2:18)
ERR!     at Object.<anonymous> (/home/runner/work/vision-prototype/vision-prototype/node_modules/@storybook/manager-webpack5/dist/cjs/presets/manager-preset.js:51:49)
ERR!     at Module._compile (node:internal/modules/cjs/loader:[11](https://github.com/Design-Commerce-Technology/vision-prototype/runs/7046605928?check_suite_focus=true#step:7:12)05:14)
ERR!     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
ERR!     at Module.load (node:internal/modules/cjs/loader:981:32)
ERR!     at Function.Module._load (node:internal/modules/cjs/loader:822:[12](https://github.com/Design-Commerce-Technology/vision-prototype/runs/7046605928?check_suite_focus=true#step:7:13))
ERR!     at Module.require (node:internal/modules/cjs/loader:1005:19)
ERR!  Error: Cannot find module 'html-webpack-plugin'
ERR! Require stack:
ERR! - /home/runner/work/vision-prototype/vision-prototype/node_modules/@storybook/manager-webpack5/dist/cjs/presets/manager-preset.js
ERR! - /home/runner/work/vision-prototype/vision-prototype/node_modules/@storybook/core-common/dist/cjs/presets.js
ERR! - /home/runner/work/vision-prototype/vision-prototype/node_modules/@storybook/core-common/dist/cjs/index.js
ERR! - /home/runner/work/vision-prototype/vision-prototype/node_modules/@storybook/core-server/dist/cjs/index.js
ERR! - /home/runner/work/vision-prototype/vision-prototype/node_modules/@storybook/core/dist/cjs/server.js
ERR! - /home/runner/work/vision-prototype/vision-prototype/node_modules/@storybook/core/server.js
ERR! - /home/runner/work/vision-prototype/vision-prototype/node_modules/@storybook/react/dist/cjs/server/build.js
ERR! - /home/runner/work/vision-prototype/vision-prototype/node_modules/@storybook/react/bin/build.js
ERR!     at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
ERR!     at Function.Module._load (node:internal/modules/cjs/loader:778:27)
ERR!     at Module.require (node:internal/modules/cjs/loader:1005:19)
ERR!     at require (node:internal/modules/cjs/helpers:102:18)
ERR!     at Object.<anonymous> (/home/runner/work/vision-prototype/vision-prototype/node_modules/@storybook/manager-webpack5/dist/cjs/presets/manager-preset.js:51:49)
ERR!     at Module._compile (node:internal/modules/cjs/loader:1105:[14](https://github.com/Design-Commerce-Technology/vision-prototype/runs/7046605928?check_suite_focus=true#step:7:15))
ERR!     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1[15](https://github.com/Design-Commerce-Technology/vision-prototype/runs/7046605928?check_suite_focus=true#step:7:16)9:10)
ERR!     at Module.load (node:internal/modules/cjs/loader:981:32)
ERR!     at Function.Module._load (node:internal/modules/cjs/loader:822:12)
ERR!     at Module.require (node:internal/modules/cjs/loader:1005:[19](https://github.com/Design-Commerce-Technology/vision-prototype/runs/7046605928?check_suite_focus=true#step:7:20)) {
ERR!   code: 'MODULE_NOT_FOUND',
ERR!   requireStack: [
ERR!     '/home/runner/work/vision-prototype/vision-prototype/node_modules/@storybook/manager-webpack5/dist/cjs/presets/manager-preset.js',
ERR!     '/home/runner/work/vision-prototype/vision-prototype/node_modules/@storybook/core-common/dist/cjs/presets.js',
ERR!     '/home/runner/work/vision-prototype/vision-prototype/node_modules/@storybook/core-common/dist/cjs/index.js',
ERR!     '/home/runner/work/vision-prototype/vision-prototype/node_modules/@storybook/core-server/dist/cjs/index.js',
ERR!     '/home/runner/work/vision-prototype/vision-prototype/node_modules/@storybook/core/dist/cjs/server.js',
ERR!     '/home/runner/work/vision-prototype/vision-prototype/node_modules/@storybook/core/server.js',
ERR!     '/home/runner/work/vision-prototype/vision-prototype/node_modules/@storybook/react/dist/cjs/server/build.js',
ERR!     '/home/runner/work/vision-prototype/vision-prototype/node_modules/@storybook/react/bin/build.js'
ERR!   ]
ERR! }

See cross issue here on Storybook repo https://github.com/storybookjs/storybook/issues/18564.

Manually adding yarn add html-webpack-plugin doesn’t solve the issue.

I can see the following in yarn.lock:

"@cypress/webpack-dev-server@^2.0.0":
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/@cypress/webpack-dev-server/-/webpack-dev-server-2.0.0.tgz#6379b28f2047bd8e6f7bf8027d4f693a545992d4"
  integrity sha512-N3NOwe+tX+jEgl0+ljxGfbIbeXi/h46JvA2nTGUCGFUfyOGElfBtBPjS5KeCix2k7wM2f4L4StkzlpDkIRBlcg==
  dependencies:
    find-up "6.3.0"
    fs-extra "9.1.0"
    html-webpack-plugin-4 "npm:html-webpack-plugin@^4"
    html-webpack-plugin-5 "npm:html-webpack-plugin@^5"
    local-pkg "0.4.1"
    speed-measure-webpack-plugin "1.4.2"
    tslib "^2.3.1"
    webpack-dev-server "^4.7.4"
    webpack-merge "^5.4.0"

While in my node-modules I have the following folders:

And @storybook/manager-webpack5 is looking instead for html-webpack-plugin

"@storybook/manager-webpack5@^6.5.9":
  version "6.5.9"
  resolved "https://registry.yarnpkg.com/@storybook/manager-webpack5/-/manager-webpack5-6.5.9.tgz#ce9dd6ea6298ab426b111f170c23deea7085ba08"
  integrity sha512-J1GamphSsaZLNBEhn1awgxzOS8KfvzrHtVlAm2VHwW7j1E1DItROFJhGCgduYYuBiN9eqm+KIYrxcr6cRuoolQ==
  dependencies:
    "@babel/core" "^7.12.10"
    "@babel/plugin-transform-template-literals" "^7.12.1"
    "@babel/preset-react" "^7.12.10"
    "@storybook/addons" "6.5.9"
    "@storybook/core-client" "6.5.9"
    "@storybook/core-common" "6.5.9"
    "@storybook/node-logger" "6.5.9"
    "@storybook/theming" "6.5.9"
    "@storybook/ui" "6.5.9"
    "@types/node" "^14.0.10 || ^16.0.0"
    babel-loader "^8.0.0"
    case-sensitive-paths-webpack-plugin "^2.3.0"
    chalk "^4.1.0"
    core-js "^3.8.2"
    css-loader "^5.0.1"
    express "^4.17.1"
    find-up "^5.0.0"
    fs-extra "^9.0.1"
    html-webpack-plugin "^5.0.0"
    node-fetch "^2.6.7"
    process "^0.11.10"
    read-pkg-up "^7.0.1"
    regenerator-runtime "^0.13.7"
    resolve-from "^5.0.0"
    style-loader "^2.0.0"
    telejson "^6.0.8"
    terser-webpack-plugin "^5.0.3"
    ts-dedent "^2.0.0"
    util-deprecate "^1.0.2"
    webpack "^5.9.0"
    webpack-dev-middleware "^4.1.0"
    webpack-virtual-modules "^0.4.1"

Desired behavior

No response

Test code to reproduce

1. Upgrade cypress to v.10,
2. ran yarn storybook:build

Cypress Version

10.3

Other

No response

[ZachJW34]

With Cypress 10, you shouldn’t need to install @cypress/webpack-dev-server since we ship it with the binary. Can you remove the dependency? You’re config should look like:

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  component: {
    devServer: {
      framework: 'create-react-app',
      bundler: 'webpack',
    },
  },
})

We do support using the dev-server as an external dependency, but most users shouldn’t need it.

[FatjonRrapaj]

With Cypress 10, you shouldn’t need to install @cypress/webpack-dev-server since we ship it with the binary. Can you remove the dependency? You’re config should look like:

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  component: {
    devServer: {
      framework: 'create-react-app',
      bundler: 'webpack',
    },
  },
})

We do support using the dev-server as an external dependency, but most users shouldn’t need it.

Well I had installed webpack as a dependency while trying to set up e2e testing, and removed it after seeing this comment, and it worked, thanks a lot!