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! Copied!
1 bằng cách mở thiết bị đầu cuối của bạn trong thư mục gốc của dự án và chạy lệnh sau: # 👇️ 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
2 và khởi động lại máy chủ IDE và Dev của bạn.# 👇️ 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
3 của bạn] và chạy các lệnh sau: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
1 vào các phụ thuộc phát triển của dự án của bạn.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
5 và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
6 [không phảiCopied!
# 👇️ 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
3] của bạn, hãy chạy lạiCopied!
# 👇️ 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
8 và khởi động lại IDE của bạn.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
3 của bạn và đảm bảo rằng nó chứa góiCopied!
# 👇️ 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
1 trong đối tượngCopied!
# 👇️ 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
1.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
8.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! Copied!
1 bằng cách mở thiết bị đầu cuối của bạn trong thư mục gốc của dự án và chạy lệnh sau: # 👇️ 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
2 và khởi động lại máy chủ IDE và Dev của bạn.# 👇️ 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
//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à
5, bây giờ Storybook đã đưa ra lỗi sau: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. [/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. [/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
6 không giải quyết vấn đề.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 "//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
7 của tôi, tôi có các thư mục sau:Copied!
{ // ... rest "devDependencies": { "html-webpack-plugin": "^5.5.0", // 👇️ only if you use TypeScript "@types/html-webpack-plugin": "^3.2.6" } }
Và
8 đang tìm kiếmCopied!
{ // ... rest "devDependencies": { "html-webpack-plugin": "^5.5.0", // 👇️ only if you use TypeScript "@types/html-webpack-plugin": "^3.2.6" } }
1Copied!
# 👇️ 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
0Copied!
# 👇️ 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
- Nâng cấp Cypress lên V.10,
- đã chạy
0Copied!
npm install --save-dev html-webpack-plugin@latest
Phiên bản Cypress
10.3
Khác
Không phản hồi