找不到模块'webpack/lib/rules/BasicEffectRulePlugin'

Posted 2023-02-22

【中文标题】找不到模块\'webpack/lib/rules/BasicEffectRulePlugin\'

【英文标题】：Cannot find module 'webpack/lib/rules/BasicEffectRulePlugin'找不到模块'webpack/lib/rules/BasicEffectRulePlugin'

【发布时间】：2020-11-11 06:24:33

【问题描述】：

我想将我的项目迁移到服务器端渲染以进行良好的 SEO，我在运行应用程序时将这个错误咬了三个小时。什么问题我看到有什么解决方法请问我该如何解决这个问题，我删除了 node_module 和 package.lock 并重新启动问题总是存在

E:\reactjs\decirshop\node_modules\webpack-cli\bin\cli.js:93
                                throw err;
                                ^

Error: Cannot find module 'webpack/lib/rules/BasicEffectRulePlugin'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15)
    at Function.Module._load (internal/modules/cjs/loader.js:506:25)
    at Module.require (internal/modules/cjs/loader.js:636:17)
    at require (E:\reactjs\decirshop\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
    at Object.<anonymous> (E:\reactjs\decirshop\node_modules\vue-loader-plugin\index.js:4:31)
    at Module._compile (E:\reactjs\decirshop\node_modules\v8-compile-cache\v8-compile-cache.js:194:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)
    at Module.require (internal/modules/cjs/loader.js:636:17)
    at require (E:\reactjs\decirshop\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
    at Object.<anonymous> (E:\reactjs\decirshop\webpack.config.js:6:25)
    at Module._compile (E:\reactjs\decirshop\node_modules\v8-compile-cache\v8-compile-cache.js:194:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)

这是我的 package.json 我该如何解决这个问题

  "name": "decirshop",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": 
    "@babel/plugin-proposal-class-properties": "^7.10.4",
    "@fortawesome/fontawesome-svg-core": "^1.2.30",
    "@fortawesome/free-brands-svg-icons": "^5.14.0",
    "@fortawesome/free-solid-svg-icons": "^5.14.0",
    "@fortawesome/react-fontawesome": "^0.1.11",
    "axios": "^0.19.2",
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.19.0",
    "cookie-session": "^1.4.0",
    "cors": "^2.8.5",
    "country-list": "^2.2.0",
    "express": "^4.17.1",
    "express-session": "^1.17.1",
    "form-data": "^3.0.0",
    "framer-motion": "^2.1.0",
    "fs": "0.0.1-security",
    "jquery": "^3.5.1",
    "multer": "^1.4.2",
    "mysql": "^2.18.1",
    "nodemailer": "^6.4.10",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-helmet": "^6.1.0",
    "react-image-file-resizer": "^0.3.1",
    "react-paypal-button-v2": "^2.6.2",
    "react-redux": "^7.2.0",
    "react-responsive": "^8.1.0",
    "react-router-dom": "^5.2.0",
    "react-select": "^3.1.0",
    "react-select-country-list": "^2.2.1",
    "react-stripe-checkout": "^2.6.3",
    "redux": "^4.0.5",
    "redux-persist": "^6.0.0",
    "sendmail": "^1.6.1",
    "serve": "^11.3.2",
    "socket.io-client": "^2.3.0"
  ,
  "devDependencies": 
    "@babel/core": "7.10.5",
    "@babel/preset-env": "7.10.4",
    "@babel/preset-react": "7.10.4",
    "babel-loader": "8.1.0",
    "concurrently": "5.2.0",
    "css-loader": "^3.6.0",
    "file-loader": "^6.0.0",
    "mini-css-extract-plugin": "^0.9.0",
    "nodemon": "2.0.4",
    "style-loader": "^1.2.1",
    "url-loader": "^4.1.0",
    "vue-loader-plugin": "^1.3.0",
    "webpack": "^4.43.0",
    "webpack-cli": "3.3.12",
    "webpack-node-externals": "^2.5.0"
  ,
  "scripts": 
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack && concurrently \"webpack --watch\" \"nodemon dist\""
  ,
  "author": "",
  "license": "ISC"

【问题讨论】：

能否添加软件包版本，这似乎是不兼容的问题，因为vue-loader-plugin 似乎在引用 webpack 内部文件。

我已经添加了如何解决兼容性问题

【参考方案1】：

试试npm update vue-loader

【讨论】：

Welcome to SO ? 关于此特定命令解决问题的原因的简短解释（或文档链接）将非常有利于其他人更好地理解解决方案

之后去php artisan cache:clear，php artisan config:clear，php artisan optimize，php artisan route:clear，php artisan view:clear，以防你之前搞砸了很多:)

【参考方案2】：

我通过更新 vue 加载器解决了这个问题。你可以使用下面的命令来更新 vue loader

npm update vue-loader

【参考方案3】：

我是 Laravel 用户。

npm i vue-loader

将 Vue-loader 从 15.9.6 更新到 15.9.8 使用 Laravel 7.30.4 和 Vue 2.6.12 为我解决了这个问题

    "vue": "^2.6.12",
    "vue-loader": "^15.9.8",

【参考方案4】：

我通过删除vue-loader-plugin并安装vue-loader来修复它，点击此链接https://vue-loader.vuejs.org/migrating.html#notable-breaking-changes

【参考方案5】：

我解决了这个错误

npm install vue-loader@latest

【讨论】：

我用你的代码解决了这个错误。谢谢。

【参考方案6】：

我通过更新 vue 加载器解决了这个问题。您可以使用以下命令来更新 vue loader

npm 更新 vue-loader

【参考方案7】：

你可以重新安装webpack到webpack@5.36.2