📑

Mac M1でReactしたら「Check failed: allocator->SetPermissions」エラーになったので直す

2021/02/11に公開

1件

M1搭載のMacでReactアプリを制作中に、「yarn start」したら、Fatal error in , line 0というエラーとともに長いエラーコードが出てきたので、問題なく起動するように直した備忘録を残しておきます。

なお、この問題の対応は公式ではまだ対応されていないので、とりあえず今日の開発を進めるための応急措置として行い、公式に対応されてたらすぐにバージョンをアップデートをすることをオススメします。

追記(2021/03/06)

node v15.9.0でこの問題は解消された見たいです！
どうしても、15.9.0より古いバージョンで動かしたいという場合を除いて、v15.9.0以上のNode.jsを使用してください。

最新バージョンのNode(v15.11.0)でこの記事の問題は解消されています！
最新のバージョンにアップグレードしてください！

はじめに

Mac M1でReact開発を行なっていた際に、Developサーバーを起動するとともに以下のようなエラーが出てきました。

❯ yarn start
yarn run v1.22.10
$ react-scripts start
ℹ ｢wds｣: Project is running at http://192.168.30.20/
ℹ ｢wds｣: webpack output is served from
ℹ ｢wds｣: Content not from webpack is served from /Users/mackay/Desktop/test/public
ℹ ｢wds｣: 404s will fallback to /
Starting the development server...

#
# Fatal error in , line 0
# Check failed: allocator->SetPermissions(reinterpret_cast<void*>(region.begin()), region.size(), PageAllocator::kNoAccess).
#
#
#
#FailureMessage Object: 0x16f523bf8
 1: 0x1009d6358 node::NodePlatform::GetStackTracePrinter()...

公式のIssueを探してみると、M1搭載のMacで開発している開発者に同じような問題が上がっているようです。

どうやら、ReactではなくNode側の問題らしく、しかも、Issueが立っているのもここ最近。
ということで、Issueの中に書かれていた応急措置でこの問題を強行突破します。

前提

NodeはNodebrew経由でインストールしており、Rosettaは使わずに環境構築をしています。
Mac M1にNodebrewを入れる方法は以下の記事がわかりやすく、この方法でNodeをインストール・コンパイルしてNodeを使用している方が対象です。

そもそも、arm86バージョンのNodeを使っている人特有の問題のようで、最初からx86バージョンのNode使っていればよかった話ではありますが、Rosetta使いたくないマンにとしては、何がなんでもarm86バージョンで使いたい。
そんなワガママさんのための対応方法を書いたのがこの記事です。

環境

Mac mini(M1, 2020)
os:macOS Big Sur 11.2
Nodeberw:1.0.1
node:v15.5.1
npm:v7.5.1
React:v17.0.1

対応

結論から言うと、この問題の対象方法は二つあり、今回は2番目の方法で対応していきます。（１番目は書いてある通りやれば多分動きます。）

Rosettaを使用して、x86バージョンのNodeをインストール・実行（arch -x86_64 nvm install 15で入るらしい？）
arm64バージョンのNodeのクラッシュしている箇所のソースコードをコメントアウトして、再度NodeをBuildする（100%有効な修正ではないが、とりあえず動くよ）

と言うことで、Nodebrew経由でインストールしたNodeを手動でビルドしていきます。

手順は以下の通りです。

Nodebrewのコードベースから、Nodeをビルドする用のコードをコメントアウト
通常通りNodebrewのコマンドをたたいてNodeをインストール
インストールしたNodeのコードベースから問題のコードをコメントアウト
Nodeを手動でビルド

1.Nodebrewのコードベースから、Nodeをビルドする用のコードをコメントアウト

まずは、Nodebrewのソースコードを探し、エディタで編集しましょう。

vim $(which nodebrew) # Vimで編集
# or
code $(which nodebrew) # VS codeで編集

Nodebrewのソースコードを開いたら、sub _cmd_compileと言うサブルーチンを探します。

以下のコードをコメントアウトします。

my $install_dir = $self->get_install_dir;
system qq[
  cd "$src_dir/$target_name" &&
  ./configure --prefix="$install_dir/$version" $configure_opts &&
  make &&
  make install
];

ファイルを保存します。
エディタは後でまた使うので、開いたままで大丈夫です。（閉じてしまった場合は、上記のコマンドで再度開けられます。）

2.通常通りNodebrewのコマンドをたたいてNodeをインストール

arm86でのNodeをインストールする際は、通常の方法ではインストールできません。
なので、Nodebrewに備わっているcompileコマンドを使って、ローカルで直接ビルドします。

1.Nodebrewのコードベースから、Nodeをビルドする用のコードをコメントアウトでコメントアウトした行は、compileコマンド内のビルドコマンドです。

以下のコマンドでNodeのソースコードをインストール（コマンドはcompile）します。
2021/02/11現在最新バージョンのNodeをインストールしています。

nodebrew compile v15.8.0

3.インストールしたNodeのコードベースから問題のコードをコメントアウト

Nodeを修正する前に、Nodebrewでコメントアウトした行を元に戻しておきましょう。

では、Nodeのソースコードを修正します。
Nodeは通常、.nodebrewディレクトリに格納されています。
まずはNodeのソースコードがある場所まで行きましょう。

cd ~/.nodebrew/src

src直下に全てのバージョンのNodeが格納されています。

今回インストールしたファイルはv15.8.0なので、このディレクトリのソースコードを修正します。

cd v15.8.0/node-v15.8.0

この中の、wasm-code-manager.ccと言うファイルを探さないといけないのですが膨大なファイルが存在するため、エディタで件のソースコードを探した方が早いです。
なので、このディレクトリをエディタで開いて、コードを探します。

code .

VScodeの検索機能でコードを探します。
deps以下のwasmディレクトリにありました。

wasm-code-manage.ccファイルの以下の行をコメントアウトします。

CHECK(allocator->SetPermissions(reinterpret_cast<void*>(region.begin()),nodebrew

保存して終了します。

4.Nodeを手動でビルド

あとはこのNodeをビルドするだけです。
以下のコマンドを確認しながらビルドを行なってください。

$ cd ~/.nodebrew/src/v15.8.0/node-v15.8.0/

$ pwd # 下記のディレクトリにいることを確認してください
/Users/{UserName}/.nodebrew/src/v15.8.0/node-v15.8.0

$ ./configure --prefix=/Users/{UserName}/.nodebrew/node/v15.8.0

$ make && make install

ご存知の通り、ビルド時間が長いので終わるまで気ままにお待ちください。

挙動確認

ビルドが終わったら一応起動するか確認しましょう。

cd ~/desktop
npx create-react-app app --template  typescript
cd app
yarn start

見慣れた画面が確認できれば終了です。

まとめ

コメントアウトするとなぜか動く。
開発にMac M1使っちゃだめ絶対。

Happy Hacking!!😎

Discussion

Yuki Shibata

救われました。。。
ありがとうございます！