💻

M1でReactNativeのセットアップ備忘録（2021/12）

2021/12/23に公開

Node.js

React Native

tech

はじめに

前回 M1 Macbook Pro の開発環境の構築までをこちらの記事で紹介しました。

Docker のインストールまでをやりましたね。

今回は React Native の実行環境を作り、 iOS シミュレーターと Android シミュレーターを起動するところまでやっていきます。

つまり、以下のように作ったプロジェクトが動くところまでになります。

npx react-native init AwesomeProject

うまくいかないことが多かったので、まだ継続して調査中のものもあるかもしれませんが、今後加筆していく予定です。

どなたかの参考になれば幸いです。

ReactNativeの実行環境を作る

本家の environment-setup を眺めながらやってみたのですが、 Intel 版ではこちらで問題なくセットアップできるのですが、 M1 版はそうはいきませんでした。

なので、そこの差異を書きながら React Native を動かすためのセットアップをしていきます。

なお、ターミナルは M1 モード で実行していくものとします。

uname -m
arm64

macOSとiOS版

Node & Watchman

node.js は前回のセットアップで asdf でインストールした状態とします。

重要なのは、 M1 ではなく Intel としてインストールすることです。

node -v
v12.22.7

brew install watchman

XCode

以下のリンク先から xip ファイルをダウンロードする。

13.1 をインストールした。

Command Line Tools

Preferences -> Locations で最新バージョンを選択してツールをインストールします。

Installing an iOS Simulator in Xcode

Xcode -> Preferences and select the Components tab から

iOS 14.5 を選択してダウンロードします。

Simulator > File > Open Simulator > iOS version > iPhone version

これで起動するシミュレーターを選択できます。

ただし、 React Native を起動するときは、おそらくローカルに入っている最新の iOS シミュレーターが起動してしまうので、
ぼくの場合は、 iOS 1.5 iPhone13 が起動しました。

React Native 起動時にシミュレーターのバージョンを指定するのはできるようなので、そちらは調べていただければと思います。

CocoaPodsがgem install cocoapodsするとエラーになる

Rosetta で起動する方法は上記リンクからご覧ください。

そして、ここが少しキモになってきます。

ターミナルは Rosetta を利用して Intel で起動する
- （Rosetta モードで起動しなくても大丈夫という話もあるが一応安全にするなら Rosetta で）
Mac にデフォルトでインストールされている system の Ruby のバージョンを使う
- rbenv 等のバージョンマネージャーでインストールした Ruby を使わない
system の Ruby に cocoapods をインストールする

以前までの Intel のやり方ははこちらでした。

sudo gem install cocoapods

それを今回は、

M1 は x86_64 で Intel Processor としてインストールする必要があります。

ffi というパッケージも同様にエラーがでるのでこのタイミングでインストールしちゃいます。

sudo arch -x86_64 gem install cocoapods
sudo arch -x86_64 gem install ffi

そしてすでに React Native のプロジェクトがある場合は、そちらで pod install します。

cd ios
pod install

ここは M1 として実行しても問題なさそうなのですが、もしエラーが出る場合は、

arch -x86_64 sudo gem install ffi

こちらをしてみるとエラーが解消するかもしれません。

https://blog.dnpp.org/cocoapods_on_m1

動作確認用のプロジェクトを作る

npx react-native init AwesomeProject

Need to install the following packages:
  react-native
Ok to proceed? (y) y

y で進みます。

ここで、M1 の CocoaPods をインストールしている状態だとエラーが出ます。

なので、 arch -x86_64 オプションを渡して Intel としてインストールしたのはこのためになります。

そしていよいよ起動してみましょう。

yarn start

yarn ios

起動していつもの画面が表示されれば iOS のほうはセットアップ完了です。

おつかれさまです。

macOSとAndroid版

Java Development Kit

Java8 のインストールをします。

brew install --cask adoptopenjdk/openjdk/adoptopenjdk8

ぼくはいろいろと試していたのもあって、11 のほうをインストールしています。

brew install --cask adoptopenjdk/openjdk/adoptopenjdk11

Android development environment

https://developer.android.com/studio

Mac with Apple chip のほうをダウンロードしました。

ここでは以下のような、設定を行っていきます。

Android SDK
Android SDK Platform
Android Virtual Device

すでに上記で iOS シミュレーターを起動したプロジェクトの android ディレクトリを Android Studio で開いておきます。

Install the Android SDK

ぼくは今回 Android 10.0(Q) の SDK をインストールしています。

"Preferences" dialog, under Appearance & Behavior → System Settings → Android SDK.

Android SDK Location が空で以下の Android を入れることができなかったので、 Edit を押してまずは Android 12 をインストールします。

これで Location に勝手にパスが設定されます。

以下にチェックを入れてインストールします。

ここはいろいろ調べながらやって、このラインナップに落ち着きました。

Android SDK Platform 29
Google APIs ARM64 v8a System Image
Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image

Android sdkにパスを通す環境変数を設定する

一応2種類の書き方をメモしておきます。

zsh

~/.zshrc

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

fish

~/.config/fish/config.fish

set ANDROID_HOME $HOME/Library/Android/sdk
set PATH $ANDROID_HOME/emulator $PATH
set PATH $ANDROID_HOME/tools $PATH
set PATH $ANDROID_HOME/tools/bin $PATH
set PATH $ANDROID_HOME/platform-tools $PATH

Androidシミュレーターを起動する

ここまで来ると AVD Manager を起動して、登録した Android シミュレーターを起動しましょう。

そしていよいよ起動してみましょう。

yarn start

yarn android

起動していつもの画面が表示されれば Android のほうはセットアップ完了です。

おつかれさまです。

番外編

iOSシミュレーター起動時にエラーが出る場合

unable to boot device in current

このエラーの場合は、シミュレーター自体は起動します。

だが yarn ios してもシミュレーター側でアプリが起動しません。

Adroidシミュレーター起動時にエラーが出る場合

Android Studio で以下のようなエラーが出る場合がありました。

Cause: internal/modules/cjs/loader.js:818 throw err; ^Error: Cannot find module '/Users/yoshiyuki.hisamatsu//code/RN/AwesomeProject/android/<--- Last few GCs --->[33326:0x110008000] 2318 ms: Scavenge 9.9 (15.2) -> 7.1 (15.2) MB, 2.4 / 0.0 ms (average mu = 1.000, current mu = 1.000) allocation failure [33326:0x110008000] 4018 ms: Scavenge 10.5 (15.5) -> 8.1 (16.7) MB, 3.7 / 0.0 ms (average mu = 1.000, current mu = 1.000) allocation failure [33326:0x110008000] 5599 ms: Scavenge 12.0 (17.0) -> 9.5 (18.2) MB, 2.4 / 0.0 ms (average mu = 1.000, current mu = 1.000) allocation failure <--- JS stacktrace --->==== JS stack trace =========================================Security context: 0x0001035808d1 <JSObject> 0: builtin exit frame: new constructor(aka Module)(this=0x0001069d0ac1 <Object map = 0x1071a3579>,0x0001069d0971 <Uint8Array map = 0x103542b99>,0x0001069d0ac1 <Object map = 0x1071a3579>) 1: ConstructFrame [pc: 0x100ec0f98] 2: StubFrame [pc: 0x100fa9a44] 3: instantiateSync(aka instantiateSync) [0x1069d0829] [/Users/yoshiyuki.hisamatsu//code/RN/AwesomeProject/node_modules/metro-h...' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:815:15) at Function.Module._load (internal/modules/cjs/loader.js:667:27) at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12) at internal/main/run_main_module.js:17:47 { code: 'MODULE_NOT_FOUND', requireStack: []}

ただし、このエラーの場合は yarn android でシミュレーターも起動し、とくに動作的にも問題なさそうなので、気にしなくてもよいのかもしれません。

Caused by: java.io.IOException: Cannot run program "node" (in directory "/Users/yoshiyuki.hisamatsu/_/mobile/android"): error=2, No such file or directory

:ReactNative:Running '[node, -e, console.log(require('react-native/cli').bin);]' command failed.
FAILURE: Build failed with an exception.
Where:
Script '/Users/yoshiyuki.hisamatsu//code//packages/-mobile/node_modules/@react-native-community/cli-platform-android/native_modules.gradle' line: 189
What went wrong:
A problem occurred evaluating script.
Cannot run program "node" (in directory "/Users/yoshiyuki.hisamatsu//code//packages/-mobile/android"): error=2, No such file or directory
Try:
Run with --info or --debug option to get more log output. Run with --scan to get full insights.
Exception is:
org.gradle.api.GradleScriptException: A problem occurred evaluating script.
at org.gradle.groovy.scripts.internal.DefaultScriptRunnerFactory$ScriptRunnerImpl.run(DefaultScriptRunnerFactory.java:93)

以下の操作で、 Android Studio 上のエラーが消えました！

これも結構ハマったので、 stackoverflow ありがとう！

Run this open -a /Applications/Android\ Studio.app
Then sync Gradle

Execution failed for task ':react-native-screens:compileDebugKotlin'.
Compilation error. See log for more details
Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
Get more help at https://help.gradle.org
BUILD FAILED in 54s
at makeError (/Users/yoshiyuki.hisamatsu//code/a/packages/a-mobile/node_modules/execa/index.js:174:9)
at /Users/yoshiyuki.hisamatsu//code/a/packages/a-mobile/node_modules/execa/index.js:278:16
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async runOnAllDevices (/Users/yoshiyuki.hisamatsu/_/code/a/packages/a-mobile/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/runOnAllDevices.js:94:5)

node.jsまわりでエラーが出る場合

Installation is not supported for this architecture: arm64

上のほうでも書きましたが、インストールする node.js を Intel にすると直りました。

asdf uninstall nodejs 12.22.7
arch -x86_64 asdf install nodejs 12.22.7

メモ、 Rosetta モードの Terminal で brew install asdf したらエラーが出ました。

brew reinstall asdf
Error: Cannot install under Rosetta 2 in ARM default prefix (/opt/homebrew)!
To rerun under ARM use:
arch -arm64 brew install ...
To install under x86_64, install Homebrew into /usr/local.

5000番ポートがすでに疲れているとエラーになる場合

lsof コマンドで調べるとすでに使われている！

 sudo lsof -i:5000 火 12/14 01:25:24 2021
COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME
ControlCe 71990 yoshiyuki.hisamatsu 20u IPv4 0x87d3b127488a2637 0t0 TCP *:commplex-main (LISTEN)
ControlCe 71990 yoshiyuki.hisamatsu 21u IPv6 0x87d3b12737af1d7f 0t0 TCP *:commplex-main (LISTEN)

Monterey の新機能の一つに AirPlay のレシーバーになれるというものがあるようで、こちらが 5000 番ポートを使うので、 5000 番ポートを使うようなサービスにしている場合はバッティングするエラーが出てしまう。

Sharing 設定から AirPlay Receiver のチェックを外して OFF にするだけのようです。

既存のRNプロジェクトをnpm installする場合

Terminal を Rosetta モードで起動します。

yarn や node.js の期待したバージョンが入っていない場合は、インストールします。

M1 のほうで yarn は入れたけど、 Intel のほうで入っていないケースはあるかもしれません。

yarn が必要ではない場合は、インストールは不要です。

brew install yarn
arch -x86_64 asdf install nodejs 12.22.7

必要な npm モジュールをグローバルインストールします。

npm install -g lerna
npm install -g typescript typescript-language-server

実行したいコマンドを実行します。

以下はあくまでもサンプルです。

yarn clean
yarn bootstrap
cd ios & pod install

pod install が難関ですが、ここを突破したらその後は楽かもしれません。

もしも M1 モードで npm install すると以下のようなエラーがでました。

$ lerna bootstrap && yarn build
lerna notice cli v4.0.0
lerna info versioning independent
lerna info Bootstrapping 13 packages
lerna info Installing external dependencies
lerna ERR! yarn install --mutex network:42424 --non-interactive stdout:
[1/5] Validating package.json...
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
lerna ERR! yarn install --mutex network:42424 --non-interactive stderr:
error Found incompatible module.
lerna WARN complete Waiting for 2 child processes to exit. CTRL-C to exit immediately.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

M1とIntel両方のモードにどれぐらい環境を構築するか問題

homebrew のパスが双方で違うのもそうですが、どうしても今の所 M1 と Intel モードを行き来することがあるので、同じような環境をセットアップしておくとコマンドがどちらだけでしか使えないなどの問題が減って良いかもしれません。

必要そうだったものだけインストールしました。

また Terminal はデフォルトシェルを起動しています。

なので、ぼくの場合は、 fish で起動しています。

brew install git
brew install tig
brew install lazygit
brew install exa
brew install asdf

tmux は Intel モードでインストールしても、 uname -m が arm になってしまうので記載していません。

tmuxに入って戻ってくるとasdfが効かなくなる

こちらは単なるメモ程度なのですが、 Intel モードで起動したターミナルで tmux コマンドを打って、その後抜けて node -v をすると、 asdf の管理外の node のバージョンが返ってきてしまいました。

tmux は arm で起動してしまうので、 tmux を使うときは arm 前提で作業するようにしました。

node-sassでnode-gypのエラーが出る

node-sass は長年ハマるポイントが多かったのですが、 M1 でもハマりました。

エラーの原因は、 node-gyp で、このあたりは非常に苦しいのですが、 node.js の入れ直しや node_modules を消して npm install し直しなどをしても解消されませんでした。

結果、

Fixed by upping the node-sass version

こちらのとおり、 node-sass 自体のバージョンを上げて見たら、動いてくれました。

error /Users/yoshiyuki.hisamatsu/*//modules//node_modules/node-sass: Command failed.
Exit code: 1
Command: node scripts/build.js
Arguments:
Directory: /Users/yoshiyuki.hisamatsu/*//modules//node_modules/node-sass
Output:
Building: /Users/yoshiyuki.hisamatsu/.asdf/installs/nodejs/12.16.1/bin/node /Users/yoshiyuki.hisamatsu/*//modules//node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [
gyp verb cli   '/Users/yoshiyuki.hisamatsu/.asdf/installs/nodejs/12.16.1/bin/node',
gyp verb cli   '/Users/yoshiyuki.hisamatsu/*//modules//node_modules/node-gyp/bin/node-gyp.js',
gyp verb cli   'rebuild',
gyp verb cli   '--verbose',
gyp verb cli   '--libsass_ext=',
gyp verb cli   '--libsass_cflags=',
gyp verb cli   '--libsass_ldflags=',
gyp verb cli   '--libsass_library='
gyp verb cli ]
gyp info using node-gyp@3.8.0
gyp info using node@12.16.1 | darwin | arm64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "/opt/homebrew/opt/python@3.9/bin/python3" in the PATH
gyp verb `which` succeeded /opt/homebrew/opt/python@3.9/bin/python3 /opt/homebrew/opt/python@3.9/bin/python3
gyp ERR! configure error
gyp ERR! stack Error: Command failed: /opt/homebrew/opt/python@3.9/bin/python3 -c import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack   File "<string>", line 1
gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack                       ^
gyp ERR! stack SyntaxError: invalid syntax
gyp ERR! stack
gyp ERR! stack     at ChildProcess.exithandler (child_process.js:303:12)
gyp ERR! stack     at ChildProcess.emit (events.js:311:20)
gyp ERR! stack     at maybeClose (internal/child_process.js:1021:16)
gyp ERR! stack     at Socket.<anonymous> (internal/child_process.js:443:11)
gyp ERR! stack     at Socket.emit (events.js:311:20)
gyp ERR! stack     at Pipe.<anonymous> (net.js:668:12)
gyp ERR! System Darwin 21.1.0
gyp ERR! command "/Users/yoshiyuki.hisamatsu/.asdf/installs/nodejs/12.16.1/bin/node" "/Users/yoshiyuki.hisamatsu/*//modules//node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /Users/yoshiyuki.hisamatsu/*//modules//node_modules/node-sass
gyp ERR! node -v v12.16.1

yarn iosでシミュレーターが起動しない

以下のような Warning が出るようになったのと、さらにはアプリが起動しないときがありました。

この場合は、シミュレーターを再起動してから再度 yarn ios をしてみるとアプリが起動してくれました。

yarn ios    197ms  水 12/22 13:12:09 2021
yarn run v1.22.17
$ yarn copy:google-info-plist:dev && react-native run-ios
$ cp ./ios/GoogleService-Info.plist.dev ./ios/GoogleService-Info.plist
info Launching iPhone 12 (iOS 15.0)
success Successfully built the app
--- xcodebuild: WARNING: Using the first of multiple matching destinations:
{ platform:iOS Simulator, id:dvtdevice-DVTiOSDeviceSimulatorPlaceholder-iphonesimulator:placeholder, name:Any iOS Simulator Device }
{ platform:iOS Simulator, id:5A9E5253-E912-4841-9B53-CF2108C953DA, OS:14.5, name:iPhone 8 }
{ platform:iOS Simulator, id:38F49530-5E00-431D-A316-D7E63CB2481E, OS:15.0, name:iPhone 8 }
{ platform:iOS Simulator, id:5BCDEA51-862D-47B2-B8E5-5B7E2E1D0A39, OS:14.5, name:iPhone 8 Plus }
{ platform:iOS Simulator, id:77F24EF7-FDAD-4A1C-8557-A1411F846CFF, OS:15.0, name:iPhone 8 Plus }
{ platform:iOS Simulator, id:C82EA202-5D18-4BFC-8D24-DA78E7181879, OS:14.5, name:iPhone 11 }
{ platform:iOS Simulator, id:EC59EEE2-11FB-434B-80DF-97AD77741D67, OS:15.0, name:iPhone 11 }
{ platform:iOS Simulator, id:FFF0FF31-C7BD-493D-B4DB-82F1B29E904D, OS:14.5, name:iPhone 11 Pro }
{ platform:iOS Simulator, id:F4BB60FE-3A03-4C17-AE3D-E06911F723E7, OS:15.0, name:iPhone 11 Pro }
{ platform:iOS Simulator, id:6FB843AA-AEF6-4BD1-BF82-FBE8CB644A61, OS:14.5, name:iPhone 11 Pro Max }
{ platform:iOS Simulator, id:BF1E82B9-2600-4FB2-B7B8-09C65D3C4751, OS:15.0, name:iPhone 11 Pro Max }
{ platform:iOS Simulator, id:2289EBF6-2199-4362-882C-F95F80975A9D, OS:14.5, name:iPhone 12 }
{ platform:iOS Simulator, id:2CA9ADA1-3649-49D4-92FB-AF4E19BDF3E8, OS:15.0, name:iPhone 12 }
{ platform:iOS Simulator, id:4B7EAD4D-9FE7-4B2A-B25E-17B132E15B03, OS:14.5, name:iPhone 12 Pro }
{ platform:iOS Simulator, id:BAE5EE6A-B679-40EA-A779-E048748CA7F4, OS:15.0, name:iPhone 12 Pro }
{ platform:iOS Simulator, id:EEE8B712-CF92-4B50-B156-08CE8F9549E4, OS:14.5, name:iPhone 12 Pro Max }
{ platform:iOS Simulator, id:58649B13-0204-4716-B86C-769191DF1307, OS:15.0, name:iPhone 12 Pro Max }
{ platform:iOS Simulator, id:9367CB7D-AA73-4C59-A9EB-7853FB73CDEE, OS:14.5, name:iPhone 12 mini }
{ platform:iOS Simulator, id:EEC3DCD2-F664-4B6F-AC9B-FCFE21AD9140, OS:15.0, name:iPhone 12 mini }
{ platform:iOS Simulator, id:D579758C-3D69-4F93-B372-89116E54250C, OS:15.0, name:iPhone 13 }
{ platform:iOS Simulator, id:78AA0DD7-EA65-4AA3-9F5A-73AA353DCCD0, OS:15.0, name:iPhone 13 Pro }
{ platform:iOS Simulator, id:5E77E71E-541F-43D3-935B-39B277062C56, OS:15.0, name:iPhone 13 Pro Max }
{ platform:iOS Simulator, id:1A22FAF1-8CA2-47E2-8432-2AECF12BC3EF, OS:15.0, name:iPhone 13 mini }
{ platform:iOS Simulator, id:5353A54E-B601-4535-96BB-6C6D2E36AF51, OS:14.5, name:iPhone SE (2nd generation) }
{ platform:iOS Simulator, id:20251389-03AE-4F99-A035-4D6144554E64, OS:15.0, name:iPhone SE (2nd generation) }
{ platform:iOS Simulator, id:CD26FA83-4306-4374-AF7B-4D42210A85DF, OS:14.5, name:iPod touch (7th generation) }
{ platform:iOS Simulator, id:919DF73C-A7B8-4E78-BB74-038CCAA6E5F4, OS:15.0, name:iPod touch (7th generation) }
{ platform:macOS, arch:arm64, variant:Designed for [iPad,iPhone], id:1FF5CC32-D773-5CED-9844-DCA4C6A40882 }
{ platform:iOS, id:dvtdevice-DVTiPhonePlaceholder-iphoneos:placeholder, name:Any iOS Device }
{ platform:iOS Simulator, id:8357BC9B-389F-41D8-9FFC-282A82140AFD, OS:14.5, name:iPad (8th generation) }
{ platform:iOS Simulator, id:193403C1-C136-4EB2-A01C-215B39DCC7DD, OS:15.0, name:iPad (9th generation) }
{ platform:iOS Simulator, id:D4E0F175-3697-43AA-8190-F2F7BB20741E, OS:14.5, name:iPad Air (4th generation) }
{ platform:iOS Simulator, id:142E52EB-A378-48E4-99F4-B7035C6940FC, OS:15.0, name:iPad Air (4th generation) }
{ platform:iOS Simulator, id:41B6311C-4179-4A14-BE96-D497017BC213, OS:14.5, name:iPad Pro (9.7-inch) }
{ platform:iOS Simulator, id:3735593D-AE6B-4356-8B61-4273C005D71C, OS:15.0, name:iPad Pro (9.7-inch) }
{ platform:iOS Simulator, id:3AA03A22-9BA5-4AEC-8AD8-00513DC40553, OS:14.5, name:iPad Pro (11-inch) (3rd generation) }
{ platform:iOS Simulator, id:2799D21B-77B9-4596-B5FC-B3CC2DD0CF3D, OS:15.0, name:iPad Pro (11-inch) (3rd generation) }
{ platform:iOS Simulator, id:E73740A6-B394-43E0-A6C8-40F81DB6630A, OS:14.5, name:iPad Pro (12.9-inch) (5th generation) }
{ platform:iOS Simulator, id:14B876C2-9510-4A5B-AD32-C16567A17900, OS:15.0, name:iPad Pro (12.9-inch) (5th generation) }
{ platform:iOS Simulator, id:AFCA73A1-F4DB-4497-AAD8-E6889AD51154, OS:15.0, name:iPad mini (6th generation) }
An error was encountered processing the command (domain=com.apple.CoreSimulator.SimError, code=405):
Unable to lookup in current state: Shutdown
error Failed to launch the app on simulator, An error was encountered processing the command (domain=com.apple.CoreSimulator.SimError, code=405):
Unable to lookup in current state: Shutdown

bcrypt_lib.nodeのエラーに悩まされる

loading /Users/yoshiyuki.hisamatsu/_//.env
internal/modules/cjs/loader.js:1208
return process.dlopen(module, path.toNamespacedPath(filename));
^

Error: dlopen(/Users/yoshiyuki.hisamatsu/*//modules/admin-server/node_modules/bcrypt/lib/binding/napi-v3/bcrypt_lib.node, 0x0001): tried: '/Users/yoshiyuki.hisamatsu/*//modules/admin-server/node_modules/bcrypt/lib/binding/napi-v3/bcrypt_lib.node' (mach-o file, but is an incompatible architecture (have 'arm64', need 'x86_64')), '/usr/local/lib/bcrypt_lib.node' (no such file), '/usr/lib/bcrypt_lib.node' (no such file)
at Object.Module._extensions..node (internal/modules/cjs/loader.js:1208:18)
at Module.load (internal/modules/cjs/loader.js:1002:32)

以下を試してみたがダメだった。

cd node_modules/bcrypt
npm install -g node-pre-gyp
node-pre-gyp install --fallback-to-build

こちらで解決方法を書いたので貼っておきます。

yarn startしたらwatchmanでエラーがでた場合

jest-haste-map: Watchman crawl failed. Retrying once with node crawler.
Usually this happens when watchman isn't running. Create an empty .watchmanconfig file in your project's root folder or initialize a git or hg repository in your project.
Error: Watchman error: std::__1::system_error: open: /Users/yoshiyuki.hisamatsu//code//node_modules: No such file or directory. Make sure watchman is running for this project. See https://facebook.github.io/watchman/docs/troubleshooting.
Recrawled this watch 5 times, most recently because:
MustScanSubDirs UserDroppedTo resolve, please review the information on
https://facebook.github.io/watchman/docs/troubleshooting.html#recrawl
To clear this warning, run:
watchman watch-del '/Users/yoshiyuki.hisamatsu/_/code/' ; watchman watch-project '/Users/yoshiyuki.hisamatsu/_/code/'
/Users/yoshiyuki.hisamatsu//code//packages/-mobile/node_modules/metro-hermes-compiler/src/emhermesc.js:81
throw ex;
^
Error: std::__1::system_error: open: /Users/yoshiyuki.hisamatsu/*/code//node_modules: No such file or directory

metro.config.js に以下のようなパスを watchFolder として登録していたらエラーになりました。

const watchFolders = [
  // M1 だと以下がエラーになる
  // path.resolve(__dirname, '..', '..', 'node_modules'),
];

module.exports = {
  watchFolders,
};

lerna で管理しているパッケージのため、このような設定をしていましたが、一旦止めることとしました。

watchman warning: Recrawled this watch 7 times, most recently because:
MustScanSubDirs UserDroppedTo resolve, please review the information on
https://facebook.github.io/watchman/docs/troubleshooting.html#recrawl
To clear this warning, run:
watchman watch-del '/Users/yoshiyuki.hisamatsu/_//packages/mobile' ; watchman watch-project '/Users/yoshiyuki.hisamatsu/_///packages/mobile'

このようなエラーが出た場合は、

watchman watch-del-all

または、

watchman watch-del '/Users/yoshiyuki.hisamatsu/_//packages/mobile' ; watchman watch-project '/Users/yoshiyuki.hisamatsu/_///packages/mobile'

で解決しました。

まだ未解決のものがたくさんあるので一旦ここまでの調査結果で出す

動いてくれない箇所はまだ多々あるので、一旦はここまでで push しておきます。

引き続きわかったことは追記していきます。

あとがき

やなり native まわりは、動かすのに多大なる苦労があるのと、まだ既存の React Native プロジェクトをいい感じに動かすところまでには至っていないです。

とくに M1 と Intel の両方のモードが Terminal に存在し、どっちで何をするかはまだ勉強途中です。

このあたりのモードを分けるというのをキレイにしていきたいですが、そちらもなかなか大変なようなので、少し小休憩。

年末にでもゆっくり検証していこうと思います。

それでは皆様良いお年を〜！