Hướng dẫn cannot find module html-webpack-plugin - không thể tìm thấy mô-đun html-webpack-plugin

Không thể tìm thấy mô-đun 'html-webpack-plugin' lỗi #

Để giải quyết lỗi "Không thể tìm thấy mô-đun 'HTML-WebPack-plugin'", hãy đảm bảo cài đặt gói

Copied!
 Nội dung chính Show
 
Không thể tìm thấy mô-đun 'html-webpack-plugin' lỗi #
Sự kết luận #
Hành vi hiện tại
Hành vi mong muốn
Mã kiểm tra để sao chép
Phiên bản Cypress
 
# 👇️ delete node_modules and package-lock.json
rm -rf node_modules
rm -f package-lock.json

# 👇️ clean npm cache
npm cache clean --force

npm install

Copied!
# 👇️ delete node_modules and package-lock.json
rm -rf node_modules
rm -f package-lock.json

# 👇️ clean npm cache
npm cache clean --force

npm install

Mở thiết bị đầu cuối của bạn trong thư mục gốc của dự án (nơi đặt tệp

Copied!
# 👇️ delete node_modules and package-lock.json
rm -rf node_modules
rm -f package-lock.json

# 👇️ clean npm cache
npm cache clean --force

npm install

Copied!
npm install --save-dev html-webpack-plugin

# 👇️ only if you use TypeScript
npm install --save-dev @types/html-webpack-plugin

Điều này sẽ thêm gói

Copied!
# 👇️ delete node_modules and package-lock.json
rm -rf node_modules
rm -f package-lock.json

# 👇️ clean npm cache
npm cache clean --force

npm install

Nếu lỗi không được giải quyết, hãy cố gắng xóa các tệp

Copied!
# 👇️ delete node_modules and package-lock.json
rm -rf node_modules
rm -f package-lock.json

# 👇️ clean npm cache
npm cache clean --force

npm install

Copied!
# 👇️ delete node_modules and package-lock.json
rm -rf node_modules
rm -f package-lock.json

# 👇️ clean npm cache
npm cache clean --force

npm install

Copied!
# 👇️ delete node_modules and package-lock.json
rm -rf node_modules
rm -f package-lock.json

# 👇️ clean npm cache
npm cache clean --force

npm install

Copied!
# 👇️ delete node_modules and package-lock.json
rm -rf node_modules
rm -f package-lock.json

# 👇️ clean npm cache
npm cache clean --force

npm install

Copied!
# 👇️ delete node_modules and package-lock.json
rm -rf node_modules
rm -f package-lock.json

# 👇️ clean npm cache
npm cache clean --force

npm install

Đảm bảo khởi động lại máy chủ IDE và Dev của bạn nếu lỗi vẫn còn. VSCode thường bị trục trặc và khởi động lại đôi khi giải quyết mọi thứ.

Nếu bạn vẫn nhận được lỗi "Không thể tìm thấy mô-đun 'HTML-WebPack-Plugin'", hãy mở tệp

Copied!
# 👇️ delete node_modules and package-lock.json
rm -rf node_modules
rm -f package-lock.json

# 👇️ clean npm cache
npm cache clean --force

npm install

Copied!
# 👇️ delete node_modules and package-lock.json
rm -rf node_modules
rm -f package-lock.json

# 👇️ clean npm cache
npm cache clean --force

npm install

Copied!
{
  // ... rest
  "devDependencies": {
    "html-webpack-plugin": "^5.5.0",

    // 👇️ only if you use TypeScript
    "@types/html-webpack-plugin": "^3.2.6"
  }
}

Copied!
{
  // ... rest
  "devDependencies": {
    "html-webpack-plugin": "^5.5.0",

    // 👇️ only if you use TypeScript
    "@types/html-webpack-plugin": "^3.2.6"
  }
}

Bạn có thể cố gắng thêm thủ công dòng và chạy lại

Copied!
# 👇️ delete node_modules and package-lock.json
rm -rf node_modules
rm -f package-lock.json

# 👇️ clean npm cache
npm cache clean --force

npm install

Hoặc cài đặt phiên bản mới nhất của gói:

Copied!
npm install --save-dev html-webpack-plugin@latest

Sự kết luận #

Để giải quyết lỗi "Không thể tìm thấy mô-đun 'HTML-WebPack-plugin'", hãy đảm bảo cài đặt gói

Copied!
# 👇️ delete node_modules and package-lock.json
rm -rf node_modules
rm -f package-lock.json

# 👇️ clean npm cache
npm cache clean --force

npm install

Copied!
# 👇️ delete node_modules and package-lock.json
rm -rf node_modules
rm -f package-lock.json

# 👇️ clean npm cache
npm cache clean --force

npm install

Tôi đã cố gắng tạo một ứng dụng React cơ bản với WebPack 4 theo liên kết này

Cho đến khi cài đặt "HTML-WebPack-plugin", tôi không phải đối mặt với bất kỳ lỗi nào.Nhưng, một khi tôi chạy lệnh "NPM Run Start", tôi tiếp tục gặp lỗi sau:

**Error: Cannot find module 'html-webpack-plugin'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)**

Tôi đã cố gắng giải quyết vấn đề này bằng hai luồng sau bằng cách cài đặt các gói trên toàn cầu và cục bộ, nhưng nó không giúp ích gì.

Lỗi: Không thể tìm thấy mô-đun HTML-WebPack-Plugin

https://github.com/webpack/webpack-dev-server/issues/1330

Vui lòng xem mã của tôi bên dưới:

package.json:

{
  "name": "react_website",
  "version": "1.0.0",
  "description": "Website using React and Webpack",
  "main": "index.js",
  "scripts": {
    "start": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.16.2",
    "webpack-cli": "^2.1.5"
  },
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1"
  }
}

webpack.config.js:

const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
    template: "./src/index.html",
    filename: "./index.html"
  })
],
};

- .Babelrc:

{
  "presets": ["env", "react"]
}

Hành vi hiện tại

Sau khi nâng cấp lên Cypress V.10 và

Copied!
{
  // ... rest
  "devDependencies": {
    "html-webpack-plugin": "^5.5.0",

    // 👇️ only if you use TypeScript
    "@types/html-webpack-plugin": "^3.2.6"
  }
}

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

Xem số bài viết ở đây trên Storybook repo StoryBookjs/Storybook#18564.

Thêm thủ công

Copied!



{
// ... rest
"devDependencies": {
"html-webpack-plugin": "^5.5.0",
// 👇️ only if you use TypeScript
"@types/html-webpack-plugin": "^3.2.6"
}
}

Tôi có thể thấy những điều sau đây trong sợi.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"

Trong khi trong

Copied!
{
  // ... rest
  "devDependencies": {
    "html-webpack-plugin": "^5.5.0",

    // 👇️ only if you use TypeScript
    "@types/html-webpack-plugin": "^3.2.6"
  }
}

Và

Copied!
{
  // ... rest
  "devDependencies": {
    "html-webpack-plugin": "^5.5.0",

    // 👇️ only if you use TypeScript
    "@types/html-webpack-plugin": "^3.2.6"
  }
}

Copied!
# 👇️ delete node_modules and package-lock.json
rm -rf node_modules
rm -f package-lock.json

# 👇️ clean npm cache
npm cache clean --force

npm install

Copied!
# 👇️ delete node_modules and package-lock.json
rm -rf node_modules
rm -f package-lock.json

# 👇️ clean npm cache
npm cache clean --force

npm install

Hành vi mong muốn

Không phản hồi

Mã kiểm tra để sao chép

1. Nâng cấp Cypress lên V.10,
2. đã chạy

   Copied!
   npm install --save-dev html-webpack-plugin@latest
   

   0

Phiên bản Cypress

10.3

Khác

Không phản hồi