一次坎坷的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居然失效了。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,723评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,485评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,998评论 0赞 344
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,323评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,355评论 5赞 374
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,079评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,389评论 3赞 400
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,019评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,519评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,971评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,100评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,738评论 4赞 324
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,293评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,289评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,517评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,547评论 2赞 354
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,834评论 2赞 345