问题描述

npm ERR! code 1
npm ERR! path D:\user\Desktop\NiSown\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c node scripts/build.js
npm ERR! Building: D:\env\nodejs\node.exe D:\user\Desktop\NiSown\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli   'D:\\env\\nodejs\\node.exe',
npm ERR! gyp verb cli   'D:\\user\\Desktop\\NiSown\\node_modules\\node-gyp\\bin\\node-gyp.js',
npm ERR! gyp verb cli   'rebuild',
npm ERR! gyp verb cli   '--verbose',
npm ERR! gyp verb cli   '--libsass_ext=',
npm ERR! gyp verb cli   '--libsass_cflags=',
npm ERR! gyp verb cli   '--libsass_ldflags=',
npm ERR! gyp verb cli   '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using node-gyp@3.8.0
npm ERR! gyp info using node@16.13.0 | win32 | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb `which` failed Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (D:\user\Desktop\NiSown\node_modules\which\which.js:13:12)
npm ERR! gyp verb `which` failed     at F (D:\user\Desktop\NiSown\node_modules\which\which.js:68:19)
npm ERR! gyp verb `which` failed     at E (D:\user\Desktop\NiSown\node_modules\which\which.js:80:29)
npm ERR! gyp verb `which` failed     at D:\user\Desktop\NiSown\node_modules\which\which.js:89:16
npm ERR! gyp verb `which` failed     at D:\user\Desktop\NiSown\node_modules\isexe\index.js:42:5
npm ERR! gyp verb `which` failed     at D:\user\Desktop\NiSown\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:198:21)
npm ERR! gyp verb `which` failed  python2 Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (D:\user\Desktop\NiSown\node_modules\which\which.js:13:12)
npm ERR! gyp verb `which` failed     at F (D:\user\Desktop\NiSown\node_modules\which\which.js:68:19)
npm ERR! gyp verb `which` failed     at E (D:\user\Desktop\NiSown\node_modules\which\which.js:80:29)
npm ERR! gyp verb `which` failed     at D:\user\Desktop\NiSown\node_modules\which\which.js:89:16
npm ERR! gyp verb `which` failed     at D:\user\Desktop\NiSown\node_modules\isexe\index.js:42:5
npm ERR! gyp verb `which` failed     at D:\user\Desktop\NiSown\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:198:21) {
npm ERR! gyp verb `which` failed   code: 'ENOENT'
npm ERR! gyp verb `which` failed }
npm ERR! gyp verb check python checking for Python executable "python" in the PATH
npm ERR! gyp verb `which` succeeded python C:\Anaconda3\python.EXE
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Command failed: C:\Anaconda3\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack   File "<string>", line 1
npm ERR! gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
npm ERR! gyp ERR! stack                       ^
npm ERR! gyp ERR! stack SyntaxError: invalid syntax
npm ERR! gyp ERR! stack
npm ERR! gyp ERR! stack     at ChildProcess.exithandler (node:child_process:397:12)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:390:28)
npm ERR! gyp ERR! stack     at maybeClose (node:internal/child_process:1064:16)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)
npm ERR! gyp ERR! System Windows_NT 10.0.19043
npm ERR! gyp ERR! command "D:\\env\\nodejs\\node.exe" "D:\\user\\Desktop\\NiSown\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd D:\user\Desktop\NiSown\node_modules\node-sass
npm ERR! gyp ERR! node -v v16.13.0
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\NihilWater\AppData\Local\npm-cache\_logs\2021-12-25T13_49_21_077Z-debug.log

---

问题原因

node-sass构建过程需要使用到python2，如果没有python2，会使用python3 执行构建命令print "%s.%s.%s" % sys.version_info[:3]出现错误。

---

解决方法

① 安装python2
假设安装地址是C:\Python27, 然后执行以下指令

# 设置config
npm config set python C:\Python27
# 重新执行npm
npm install

② 更新npm包
对于部分的npm包，新版本包中支持了python3，我们的node-sass就是这样。可以使用新版本的node-sass组件（根据报错中提示的模块进行更新），这个方法可以免去安装python2，但自己调整版本会比较吃力，总结操作如下，如果想体验一下更新本吧感觉，可以阅读选阅内容。
先卸载老的npm包

npm uninstall node-sass
npm uninstall sass-loader
npm uninstall react-scripts
npm uninstall webpack
npm uninstall webpack-cli

再进行安装

npm install react-scripts --save
npm install webpack -D
npm install webpack-cli -D
npm install node-sass -D
npm install sass-loader -D

重新执行install命令即可

npm install

---

---

---

选阅内容

这里将会详细地介绍如何一步步更新版本直到项目可以运行。

# 卸载安装失败的包
npm uninstall node-sass
# 安装新的版本 可以在https://www.npmjs.com//上进行查询版本号
npm install node-sass -D

接着直接运行如果提示如下信息，看倒数第二行可以看出是sass-loader的版本和node-sass不匹配所导致。

D:\user\Desktop\NiSown>npm start
> nisnow@0.1.0 start
> react-scripts start

(node:37988) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at D:\user\Desktop\NiSown\node_modules\postcss-safe-parser\node_modules\postcss\package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
i ｢wds｣: Project is running at http://172.24.70.216/
i ｢wds｣: webpack output is served from
i ｢wds｣: Content not from webpack is served from D:\user\Desktop\NiSown\public
i ｢wds｣: 404s will fallback to /
Starting the development server...
Failed to compile.

./src/pages/index/index.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/pages/index/index.scss)
Node Sass version 7.0.0 is incompatible with ^4.0.0 || ^5.0.0.

我们故技重施，再把sass-loader卸载了重新下载一遍

# 卸载安装失败的包
npm uninstall sass-loader
npm install sass-loader -D

但此时当我们运行npm install sass-loader -D 时又会提示出新的问题，观察第12行出现Conflicting peer dependency: webpack@5.65.0，原来是webpack发生冲突，

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: nisnow@0.1.0
npm ERR! Found: sass-loader@10.1.1
npm ERR! node_modules/sass-loader
npm ERR!   dev sass-loader@"*" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev sass-loader@"*" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: webpack@5.65.0
npm ERR! node_modules/webpack
npm ERR!   peer webpack@"^5.0.0" from sass-loader@12.4.0
npm ERR!   node_modules/sass-loader
npm ERR!     dev sass-loader@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\NihilWater\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\NihilWater\AppData\Local\npm-cache\_logs\2021-12-25T14_29_49_124Z-debug.log

打开node_modules\webpack\package.json路径一看，原来我项目中webpack版本为4.44.2,于是再把webpack卸载重装一下。

npm uninstall webpack
npm uninstall webpack-cli

在卸载完成以后，把 package-lock.json 中 webpack 有关内容给删除掉，（ 这里可以搜索版本号，很快就可以发现有关的内容）

npm install webpack@5.65.0 -D # 这里不加版本号会又下载回4.44.2,应该是react-scripts规定的。
npm install webpack-cli -D

以上两行命令均运行成功，之后再尝试安装sass-loader

npm install sass-loader -D

实验成功，但再次测运行项目，测试又失败了， 提示如下。

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:\user\Desktop\NiSown\node_modules\react-scripts\node_modules\webpack (version: 4.46.0)

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:\user\Desktop\NiSown\node_modules\react-scripts\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!

观察发现，原来react-scripts版本较老，要求webpack的版本较低，于是，我们再更新一遍 react-scripts。

npm uninstall react-scripts
npm install react-scripts --save

安装 react-scripts 成功，再次运行 npm start 测试成功！。总结，node-sass更新，影响了sass-loader, 影响了webpack,影响了react-scripts。我们只要把他们都更新一下就可以了。如何能快速定位到问题，关键要理清思路，我们是在更新版本，要解决的问题是版本依赖。