一、问题描述

首先正常 yarn add .,发现依赖中node-sass无法正常安装导致编译中断,于是单独安装node-sass,报错如下

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.

npm ERR! code 1

npm ERR! path E:\code\xxxxx_admin_web\node_modules\node-sass

npm ERR! command failed

npm ERR! command C:\Windows\system32\cmd.exe /d /s /c C:\Users\ADMINI~1\AppData\Local\Temp\postinstall-c9fb2595.cmd

npm ERR! Building: D:\nodejs\node.exe E:\code\xxxxx_admin_web\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:\\nodejs\\node.exe',

npm ERR! gyp verb cli 'E:\\code\\\xxxxx_admin_web\\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.15.1 | 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 (E:\code\xxxxx_admin_web\node_modules\which\which.js:13:12)

npm ERR! gyp verb `which` failed at F (E:\code\xxxxx_admin_web\node_modules\which\which.js:68:19)

npm ERR! gyp verb `which` failed at E (E:\code\xxxxx_admin_web\node_modules\which\which.js:80:29)

npm ERR! gyp verb `which` failed at E:\code\xxxxx_admin_web\node_modules\which\which.js:89:16

npm ERR! gyp verb `which` failed at E:\code\xxxxx_admin_web\node_modules\isexe\index.js:42:5

npm ERR! gyp verb `which` failed at E:\code\xxxxx_admin_web\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 (E:\code\xxxxx_admin_web\node_modules\which\which.js:13:12)

npm ERR! gyp verb `which` failed at F (E:\code\xxxxx_admin_web\node_modules\which\which.js:68:19)

npm ERR! gyp verb `which` failed at E (E:\code\xxxxx_admin_web\node_modules\which\which.js:80:29)

npm ERR! gyp verb `which` failed at E:\code\xxxxx_admin_web\node_modules\which\which.js:89:16

npm ERR! gyp verb `which` failed at E:\code\xxxxx_admin_web\node_modules\isexe\index.js:42:5

npm ERR! gyp verb `which` failed at E:\code\xxxxx_admin_web\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:\Program Files\python\python.EXE

npm ERR! gyp ERR! configure error

npm ERR! gyp ERR! stack Error: Command failed: C:\Program Files\python\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:398:12)

npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:527:28)

npm ERR! gyp ERR! stack at maybeClose (node:internal/child_process:1092:16)

npm ERR! gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5)

npm ERR! gyp ERR! System Windows_NT 10.0.18363

npm ERR! gyp ERR! command"D:\\nodejs\\node.exe""E:\\code\\\xxxxx_admin_web\\node_modules\\node-gyp\\bin\\node-gyp.js""rebuild""--verbose""--libsass_ext=""--libsass_cflags=""--libsass_ldflags=""--libsass_library="

npm ERR! gyp ERR! cwd E:\code\xxxxx_admin_web\node_modules\node-sass

npm ERR! gyp ERR! node -v v16.15.1

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\Administrator\AppData\Local\npm-cache\_logs\2022-10-09T03_11_39_887Z-debug-0.log

这种情况我们一般都只会说依赖出现问题了。按常规的方法,删除依赖,重新安装

而对出现报错的归因解释得通俗易懂的,可以参考——思否-npm i 运行错误 这个解答

是 node-sass 的问题,这是一个 native 包,默认情况下每个 node 版本都需要单独的 node-sass,一般会从 github release 上下载,你的node版本是 v16.xx.xx ,github release 没有这个版本,所以会转向本地构建,本地构建需要 windows build tools,简单说就是需要安装 visual studio 2019。安装这个后你的环境变量里就可以使用 python 等命令,但是明显你没有,所以会报错

所以针对这个问题,有两种解决思路

二、解决方案

(一)、node降级(不推荐)

node切换为v12或者v14的版本

(二)、处理依赖

对依赖的处理方式也有两种方式

参考 CSDN-node16 node-sass 版本

方式一、替换依赖

卸载旧版本的node-sasssass-loader,安装sasssass-loader,不再使用node-sass

1

2

npm uninstall sass-loader node-sass

npm install sass-loader@8.0.2 sass@1.26.5 -D

方式二、安装指定版本依赖

安装node16+相对应版本的node-sasssass-loader

1

npm i node-sass@6.0.1 sass-loader@10.2.0

如果使用方法二之后报错,可能是安装过程中某些包丢失,尝试以下方法解决:

1

npm rebuild node-sass

## 根据自己使用的nodejs版本情况,选择node-sass和sass-loader对应的版本。

>node 12.x-14.x版本对应如下sass版本:

node-sass@4.14.1 (全局安装使用,不用安装到项目):npm install node-sass@4.14.1 -g

sass-loader@8.0.2 (全局安装使用,不用安装到项目):npm install sass-loader@8.0.2 -g

dart-sass@1.25.0 (项目中):npm intsall dart-sass@1.25.0

>node 16.x版本对应如下sass版本:

node-sass@6.0.1 (全局安装使用,不用安装到项目):npm install node-sass@6.0.1 -g

sass-loader@10.2.1 (全局安装使用,不用安装到项目):npm install sass-loader@10.2.1 -g

dart-sass@1.25.0 (项目中):npm intsall dart-sass@1.25.0

解决了Cannot read properties of undefined (reading ‘parseComponent‘)

Vue中eslint报错的修改,绝对有效!!!

Syntax Error: TypeError: Cannot read properties of undefined (reading 'parseComponent')

You may use special comments to disable some warnings.

Use // eslint-disable-next-line to ignore the next line.

Use /* eslint-disable */ to ignore all warnings in a file.

1

2

3

4

5

方法一:

1.找到文件 .eslintrc.js文件,如下图,把 '@vue/standard’注释掉

方法二:

1.找到文件 vue.config.js

修改lintOnSave 为false,如果没有就添加vue.config.js这个文件并把 lintOnSave 设置为false

方法三:

就是所谓的在build/webpack.base.conf.js文件中,注释或者删除掉:module->rules中有关eslint的规则,(我有这个文件但是内容空空白白,然并软,这张图复制别人的,位置就是那里)

方法四:

以上三种方式都无效的我,浪费一下午找的,最后差点信了有些人的鬼话想去卸载脚手架vue-cli,我真是服了那些出馊主意的人,最后这个方式解决了,

1、 yarn add vue-template-compiler

或 npm add vue-template-compiler

2、最后如果还是不行就再用

yarn upgrade –latest vue-template-compiler

npm upgrade –latest vue-template-compiler

最近多次遇到这个问题,node16+版本安装或者初始化带有node-sass和sass-loader包的项目报错。翻遍了所有相关文章,总结出以下两种解决办法:

方法一:

卸载旧版本的node-sass和sass-loader,安装sass和sass-loader,不再使用node-sass

npm uninstall sass-loader node-sass

npm install sass-loader@8.0.2 sass@1.26.5 -D

方法二:

安装node16+相对应版本的node-sass和sass-loader

npm i node-sass@6.0.1 sass-loader@10.2.0

如果使用方法二之后报错,可能是安装过程中某些包丢失,尝试以下方法解决:

npm rebuild node-sass

发表回复