webpack处理less的loader_登录器和引擎版本号不匹配

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "webpack": "4.44.2"

Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack was detected higher up in the tree:

  D:\Web\Project\RenHai1_admin-1\renhai_admin\node_modules\webpack (version: 5.64.2)

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "webpack" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

  5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
     This may help because npm has known issues with package hoisting which may get resolved in future versions.

  6. Check if D:\Web\Project\RenHai1_admin-1\renhai_admin\node_modules\webpack is outside your project directory.
     For example, you might have accidentally installed something in your home folder.

  7. Try running npm ls webpack in your project folder.
     This will tell you which other package (apart from the expected react-scripts) installed webpack.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

昨天遇到这样一个问题 按照上面的方法都试了一下 仍然解决不了

 - Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
 - Delete node_modules in your project folder.
 - Remove "webpack" from dependencies and/or devDependencies in the package.json file in your project folder.
 - Run npm install or yarn, depending on the package manager you use.

首先第一种

在第三步的时候我并没有在package.json中找到webpack配置项，就跳过继续第四步，结果没解决

• 指定版本号下载
• 指定版本号全局卸载再下载

都不能解决

接着就注意到是不是npm i和npm i -s的原因，用npm i -s重复上面的操作 仍然不行
主要还是没有成功配置上在package.json中没有webpack配置项，具体什么原因我也不清楚
其中还出现了下面这个问题

internal/modules/cjs/loader.js:888
  throw err;
  ^

Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
Require stack:
- D:\Web\Project\RenHai1_admin-1\renhai_admin\node_modules\html-webpack-plugin\lib\child-compiler.js
- D:\Web\Project\RenHai1_admin-1\renhai_admin\node_modules\html-webpack-plugin\lib\cached-child-compiler.js
- D:\Web\Project\RenHai1_admin-1\renhai_admin\node_modules\html-webpack-plugin\index.js
- D:\Web\Project\RenHai1_admin-1\renhai_admin\node_modules\react-scripts\config\webpack.config.js
- D:\Web\Project\RenHai1_admin-1\renhai_admin\node_modules\react-app-rewired\scripts\start.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:885:15)
    at Function.Module._load (internal/modules/cjs/loader.js:730:27)
    at Module.require (internal/modules/cjs/loader.js:957:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (D:\Web\Project\RenHai1_admin-1\renhai_admin\node_modules\html-webpack-plugin\lib\child-compiler.js:14:28)
    at Module._compile (internal/modules/cjs/loader.js:1068:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Module.load (internal/modules/cjs/loader.js:933:32)
    at Function.Module._load (internal/modules/cjs/loader.js:774:14)
    at Module.require (internal/modules/cjs/loader.js:957:19) { 
   
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'D:\\Web\\Project\\RenHai1_admin-1\\renhai_admin\\node_modules\\html-webpack-plugin\\lib\\child-compiler.js',
    'D:\\Web\\Project\\RenHai1_admin-1\\renhai_admin\\node_modules\\html-webpack-plugin\\lib\\cached-child-compiler.js',
    'D:\\Web\\Project\\RenHai1_admin-1\\renhai_admin\\node_modules\\html-webpack-plugin\\index.js',
    'D:\\Web\\Project\\RenHai1_admin-1\\renhai_admin\\node_modules\\react-scripts\\config\\webpack.config.js',
    'D:\\Web\\Project\\RenHai1_admin-1\\renhai_admin\\node_modules\\react-app-rewired\\scripts\\start.js'
  ]
}

查了之后发现是因为没有安裝webpack-cli
安装之后根本和主要问题没关系 webpack版本仍然存在问题
其中还去手动更改了node_modules/webpack/package.json里面配置项——不行

根据上面提示的第二种方法

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.

解决了 但是出现了 接下来的问题

./node_modules/antd/es/button/style/index.less (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-8-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-8-3!./node_modules/less-loader/dist/cjs.js??ref--5-oneOf-8-4!./node_modules/antd/es/button/style/index.less)
TypeError: this.getOptions is not a function

我不理解

总之 最后解决的方法是—重点

1. npm install webpack@4.44.2
2. "less": "^3.9.0", "less-loader": "^4.1.0",
3. npm i

我不理解为什么我运行npm install webpack@4.44.2的时候package.json中不显示"webpack": "^4.44.2"难道我当时思绪混乱了一直想着全局问题，而这个是局部安裝去解决我没有这样执行过，一直在npm i后面加-g
——可能是吧

接着第二步也可以在终端指定版本号下载，他就是来解决下面这个问题的

./node_modules/antd/es/button/style/index.less (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-8-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-8-3!./node_modules/less-loader/dist/cjs.js??ref--5-oneOf-8-4!./node_modules/antd/es/button/style/index.less)
TypeError: this.getOptions is not a function

原来这个问题也是版本号的问题，直接下载npm i less less-loader下载的都是最新版，导致less-loader版本过高10.xx.xx，导致版本不匹配，搜索之后发现应该是"less": "^3.9.0", "less-loader": "^4.1.0"这样。
总之，忙活了一上午，可算给解决了，以后出现问题最重要的是思路清晰，一步步去尝试，一步步去解决…