一次坎坷的react安装经历 Mac

React环境安装

安装node（nvm）

此处安装的是nvm，可以同事安装不同版本的node环境，已安装node忽略此步骤

Nvm官方地址

https://github.com/nvm-sh/nvm

命令如下

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.0/install.sh | bash

一般来说，raw.githubusercontent.com这个域名是无法正常解析的，所以需要首先执行以下命令

sudo vi /etc/hosts

添加

151.101.76.133 raw.githubusercontent.com
(http://raw.githubusercontent.com)

（参考自：https://blog.csdn.net/laoxuan2011/article/details/106177126/）

之后执行nvm安装

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.0/install.sh | bash

写入配置文件

vi ~/.bash_profile

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

使之生效

source ~/.bash_profile

检查是否安装成功

nvm --version

输出版本表示安装成功

0.37.0

安装最新的稳定版node

nvm install node

查看node版本

node -v

输出版本表示安装成功

v15.1.0

安装cnpm

`npm install -g cnpm --registry=https://registry.npm.taobao.org

npm config set registry https://registry.npm.taobao.org`

安装react

这里参考的是菜鸟教程

https://www.runoob.com/react/react-install.html

全局安装react

cnpm install -g create-react-app

建立一个react项目

npx create-react-app my-app

看起来非常顺利，一切即将大功告成，可问题就在此时发生了

报错内容

npm ERR! code 1

npm ERR! path /Users/XXX/Documents/my-app/node_modules/canvas

npm ERR! command failed

npm ERR! command sh -c node-gyp rebuild

npm ERR! /bin/sh: pkg-config: command not found

npm ERR! gyp: Call to 'pkg-config pixman-1 --libs' returned exit status 127 while in binding.gyp. while trying to load binding.gyp

npm ERR! gyp ERR! configure error

npm ERR! gyp ERR! stack Error: `gyp` failed with exit code: 1

npm ERR! gyp ERR! stack  at ChildProcess.onCpExit (/Users/XXX/Documents/ReactProject/my-app/node_modules/node-gyp/lib/configure.js:345:16)

npm ERR! gyp ERR! stack  at ChildProcess.emit (node:events:327:20)

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

npm ERR! gyp ERR! System Darwin 19.6.0

npm ERR! gyp ERR! command "/Users/XXXXX/.nvm/versions/node/v15.1.0/bin/node" "/Users/XXXXX/Documents/my-app/node_modules/.bin/node-gyp" "rebuild"

npm ERR! gyp ERR! cwd /Users/XXXXXX/Documents/my-app/node_modules/canvas

npm ERR! gyp ERR! node -v v15.1.0

npm ERR! gyp ERR! node-gyp -v v3.8.0

npm ERR! gyp ERR! not ok

总之就是not ok。下半部分可能废话比较多，先放一个简化版，后面有详细的配置过程与参考链接

简化版

1. 安装xcode command line tools
2. brew install pkg-config, pixman, cairo, pango
3. 配置pkg-config环境变量
4. 降低node版本至12.13.1
5. (不一定用得到)
   npm install -g node-gyp
   sudo npm install bcrypt
   npm rebuild

下面是详细版，有完整的命令与参考地址

详细版

看报错信息是缺少pkg-config这个东西，那么就安装了

安装的时候需要用到homebrew

参考地址，写得很详细

https://zhuanlan.zhihu.com/p/90508170

还需要下载安装xcode command line tools

https://developer.apple.com/download/more

执行命令

brew install pkg-config

在经过漫长的等待之后，出现这条信息就表示pkg-config安装成功了，如果不成功，应该是brew源的问题，换一个源再试一下

🍺 /usr/local/Cellar/pkg-config/0.29.2_3: 11 files, 623.8KB

配置环境变量

vi ~/.bash_profile

输入以下内容，注意自己下载的pkg-config路径版本

export PKG_CONFIG_PATH=/usr/local/Cellar/pkg-config/0.29.2_3

export PATH=$PKG_CONFIG_PATH/bin:$PAT

执行

source ~/.bash_profile

注意=号的左右不能有空格，否则会报错
/Users/XXXXX/.bash_profile:7: bad assignment

重新create-react-app my-app

此时注意，如果原来的路径里有my-app这个项目，记得删除。反正也不能用，删就删了。

这个时候令人心里一颤的错误又出现了，整体风格和上面贴的那串错误差不多，少的包是pixman

继续

brew install pixman

安装成功后再次循环，报错如故，核心内容是

npm ERR! No package 'cairo' found

继续

brew install cairo

经过更加漫长的等待，安装完成后会看到Python3.9，也不知道为什么会扯到Python。。。

安装cairo不要用阿里的源，会报一个地址404错误导致下载失败，查了一下从4月份就有这个问题了一直没解决。brew本来源没有问题，缺点是太慢。

半个多小时之后，再一次create-react-app my-app，还是报错

npm ERR! No package 'pangocairo' found

这题我会，brew install pangocairo

报错

==> Searching for similarly named formulae...

Error: No similarly named formulae found.

Error: No available formula or cask with the name "pangocairo".

==> Searching for a previously deleted formula (in the last month)...

Error: No previously deleted formula found.

==> Searching taps on GitHub...

Error: No formulae found in taps.

查无此人？百度告知命令应该是

brew install pango

此时可把源换成阿里，速度要快很多

然而create-react-app还是报错，这次的报错更加奇怪

npm ERR! code 1

npm ERR! path /Users/XXXX/Documents/ReactProject/my-app/node_modules/canvas

npm ERR! command failed

npm ERR! command sh -c node-gyp rebuild

npm ERR! SOLINK_MODULE(target) Release/canvas-postbuild.node

npm ERR!  CXX(target) Release/obj.target/canvas/src/backend/Backend.o

npm ERR!  CXX(target) Release/obj.target/canvas/src/backend/ImageBackend.o

npm ERR!  CXX(target) Release/obj.target/canvas/src/backend/PdfBackend.o

npm ERR! ../src/backend/Backend.cc:111:10: warning: address of stack memory associated with local variable 'msg' returned [-Wreturn-stack-address]

npm ERR!  return msg.c_str();

npm ERR! ^~~

npm ERR! 1 warning generated.

npm ERR! In file included from ../src/backend/PdfBackend.cc:1:

npm ERR! In file included from ../src/backend/PdfBackend.h:4:

npm ERR! ../src/backend/../closure.h:6:10: fatal error: 'jpeglib.h' file not found

npm ERR! #include <jpeglib.h>

npm ERR! ^~~~~~~~~~~

npm ERR! 1 error generated.

npm ERR! make: *** [Release/obj.target/canvas/src/backend/PdfBackend.o] Error 1

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/XXX/Documents/ReactProject/my-app/node_modules/node-gyp/lib/build.js:262:23)

npm ERR! gyp ERR! stack  at ChildProcess.emit (node:events:327:20)

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

npm ERR! gyp ERR! System Darwin 19.6.0

npm ERR! gyp ERR! command "/Users/XXX/.nvm/versions/node/v15.1.0/bin/node" "/Users/XXX/Documents/ReactProject/my-app/node_modules/.bin/node-gyp" "rebuild"

npm ERR! gyp ERR! cwd /Users/XXX/Documents/ReactProject/my-app/node_modules/canvas

npm ERR! gyp ERR! node -v v15.1.0

npm ERR! gyp ERR! node-gyp -v v3.8.0

npm ERR! gyp ERR! not ok

npm ERR! A complete log of this run can be found in:

npm ERR!  /Users/XXX/.npm/_logs/2020-11-08T11_59_09_842Z-debug.log

#nvm

终于在GitHub上找到了类似的报错，地址为

https://github.com/Automattic/node-canvas/issues/1580

一位大佬的回答，居然是降版本

sudo npm install n -g
n 12.13.1
npm i canvas --save

鉴于我没有装n，直接用nvm安装的node 12.13.1

nvm install 12.13.1
nvm use 12.13.1  // 临时修改node版本，只在当前终端生效
// 或者 nvm alias default 12.13.1 全局修改node版本，重启终端生效
node -v

实验命令npm I canvas，报了一个警告（虽然不知道有没有什么问题）

node-pre-gyp WARN Using needle for node-pre-gyp https download

继续https://www.jianshu.com/p/0694587a1b0a

npm install -g node-gyp
sudo npm install bcrypt
npm rebuild

第不知道多少次重复这个命令

npx create-react-app my-app

在漫长与忐忑的等待之后终于大功告成

image.png

后来发现，有很多与到相同问题的人是在直接npm install canvas的时候出现的，仔细看我的报错信息，归根结底还是canvas的错误导致的这一系列问题，所以我后来的实验命令就改成了npm i canvas。但记录这一问题的博客时间也都比较早，不知道为什么现在又出现了。归根结底，遇到的这些麻烦可能是安装node版本太新的缘故，也许这些操作中有很多是多余的。为了这个问题耗费了一个周末的时间，期间重装了一次macOS系统，因为我之前的pip和conda居然失效了。