HBuilder编译: Cannot read properties of undefined (reading 'toString')

编译报错

• 前提
  MacBook M2电脑由于兼容问题，导致很多软件不能直接使用。
  这里是在HBuilder编译工程时报错，工程是从旧的MacBook上迁移过来的。

安装npm

• npm安装库文件
  使用如下命令（npm i）安装所有需要安装的库文件

npm i

报错

zsh: command not found: npm

• 安装npm
  通过npm官网（http://nodejs.cn/download/）安装npm，不要使用终端来安装。
  

  image.png

• 再次安装npm库文件（npm I）并安装成功

• 执行npm run编译
  报错信息如下：

 error  in ./src/App.vue?vue&type=style&index=1&lang=scss&
Syntax Error: TypeError: Cannot read properties of undefined (reading 'toString')

• 排查分析：
  首先排查应该跟vue-cli版本有关，需要安装4的版本，可参考环境安装：

npm install -g @vue/cli@4

执行该命令前，查看电脑安装的vue版本：

vue -V
zsh: command not found: vue

说明：没有安装vue

• 全局安装vue

npm install -g @vue/cli@4

报错：

MacBook-Pro wvpn-sany-shop-uniapp % npm install -g @vue/cli@4
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm ERR! code EACCES
npm ERR! syscall mkdir
npm ERR! path /usr/local/lib/node_modules/@vue
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/@vue'
npm ERR!  [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/@vue'] {
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'mkdir',
npm ERR!   path: '/usr/local/lib/node_modules/@vue'
npm ERR! }
npm ERR! 
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/hh/.npm/_logs/2022-07-18T02_32_07_046Z-debug-0.log

• 进一步分析：应该是sass插件的问题
  node-sass和sass-loader版本有冲突
  结果：问题依然存在，即便删除node_modules这个目录，重新安装也不行。

这个时候重新执行命令（npm i）报错：

MacBook-Pro wvpn-sany-mall-uniapp % npm i
npm ERR! code ECONNRESET
npm ERR! syscall read
npm ERR! errno -54
npm ERR! network read ECONNRESET
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network 
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/hh/.npm/_logs/2022-07-18T08_18_04_552Z-debug-0.log

重试：报错：
npm ERR! 2 warnings generated.
npm ERR! In file included from ../src/libsass/src/values.cpp:3:
npm ERR! In file included from ../src/libsass/src/values.hpp:4:
npm ERR! ../src/libsass/src/ast.hpp:1614:25: warning: loop variable 'numerator' creates a copy from type 'const std::string' [-Wrange-loop-construct]
npm ERR!         for (const auto numerator : numerators)
npm ERR!                         ^
npm ERR! ../src/libsass/src/ast.hpp:1614:14: note: use reference type 'const std::string &' to prevent copying
npm ERR!         for (const auto numerator : numerators)
npm ERR!              ^~~~~~~~~~~~~~~~~~~~~~
npm ERR!                         &
npm ERR! ../src/libsass/src/ast.hpp:1616:25: warning: loop variable 'denominator' creates a copy from type 'const std::string' [-Wrange-loop-construct]
npm ERR!         for (const auto denominator : denominators)
npm ERR!                         ^
npm ERR! ../src/libsass/src/ast.hpp:1616:14: note: use reference type 'const std::string &' to prevent copying
npm ERR!         for (const auto denominator : denominators)
npm ERR!              ^~~~~~~~~~~~~~~~~~~~~~~~
npm ERR!                         &
npm ERR! 2 warnings generated.
npm ERR! env: python: No such file or directory
npm ERR! make: *** [Release/sass.a] Error 127
npm ERR! gyp ERR! build error 
npm ERR! gyp ERR! stack Error: `make` failed with exit code: 2
npm ERR! gyp ERR! stack     at ChildProcess.onExit (/Users/hh/Documents/webview/wvpn-sany-mall-uniapp/wvpn-sany-mall-uniapp/node_modules/node-gyp/lib/build.js:194:23)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:527:28)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)
npm ERR! gyp ERR! System Darwin 21.5.0
npm ERR! gyp ERR! command "/usr/local/bin/node" "/Users/hh/Documents/webview/wvpn-sany-mall-uniapp/wvpn-sany-mall-uniapp/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd /Users/hh/Documents/webview/wvpn-sany-mall-uniapp/wvpn-sany-mall-uniapp/node_modules/node-sass
npm ERR! gyp ERR! node -v v16.15.1
npm ERR! gyp ERR! node-gyp -v v7.1.2
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!     /Users/hh/.npm/_logs/2022-07-18T08_26_32_343Z-debug-0.log

通过认真分析错误日志，发现有一句重要的提示，那就是：

npm ERR! env: python: No such file or directory

安装python2:

• 具体见：MacBook M2安装python2
  说明：（），如果有什么问题可以参考该文章。

• 解决：安装python2之后，再执行npm i，然后对HBuilder执行编译命令npm run就成功了。

• 参考：
  https://blog.51cto.com/u_15072780/4222836
  https://www.jianshu.com/p/a4ad41f10659
  https://blog.csdn.net/qq_15345551/article/details/125527080