前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >webpack处理less的loader_登录器和引擎版本号不匹配

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

作者头像
全栈程序员站长
发布2022-09-22 16:04:42
发布2022-09-22 16:04:42
82100
代码可运行
举报
运行总次数:0
代码可运行

大家好,又见面了,我是你们的朋友全栈君。

代码语言:javascript
代码运行次数:0
运行
复制
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!

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

代码语言:javascript
代码运行次数:0
运行
复制
 - 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 inpm i -s的原因,用npm i -s重复上面的操作 仍然不行 主要还是没有成功配置上在package.json中没有webpack配置项,具体什么原因我也不清楚 其中还出现了下面这个问题

代码语言:javascript
代码运行次数:0
运行
复制
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里面配置项——不行

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

代码语言:javascript
代码运行次数:0
运行
复制
If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.

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

代码语言:javascript
代码运行次数:0
运行
复制
./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 ——可能是吧

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

代码语言:javascript
代码运行次数:0
运行
复制
./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"这样。 总之,忙活了一上午,可算给解决了,以后出现问题最重要的是思路清晰,一步步去尝试,一步步去解决…

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/169229.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 首先第一种
  • 根据上面提示的第二种方法
  • 总之 最后解决的方法是—重点
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档