💻

M1でReactNativeのセットアップエラー編（2022/1）

2022/01/19に公開

Node.js

React Native

tech

はじめに

M1 Macbook で React Native のプロジェクトのセットアップをした際に、新たなプロジェクトの場合は問題ないのですが、既存プロジェクトを M1 対応する備忘録の一部エラー関連を追記した記事になります。

以下が、 2021 年の最後のほうに書いた記事です。

セットアップ編をご覧になりたい場合は以下からご覧ください。

yarn startでWatchmanのエラーが出る

React Native のプロジェクトで yarn start したときに wachman のエラーが出ました。

どうも内容見ると metro 側のエラーっぽいので、 metro.config.js を少しずつコメントアウトしていってみました。

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/user/_//project/node_modules: No such file or directory. Make sure watchman is running for this project. See [https://facebook.github.io/watchman/docs/troubleshooting](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](https://facebook.github.io/watchman/docs/troubleshooting.html#recrawl)
To clear this warning, run:
`watchman watch-del '/Users/user/_//project' ; watchman watch-project '/Users/user/_//project'`

/Users/user/_//project/packages/mobile/node_modules/metro-hermes-compiler/src/emhermesc.js:81
throw ex;
^

Error: std::__1::system_error: open: /Users/user/*//project/node_modules: No such file or directory
at BunserBuf.<anonymous> (/Users/user/*//project/packages/mobile/node_modules/fb-watchman/index.js:95:23)
at BunserBuf.emit (events.js:314:20)
at BunserBuf.process (/Users/user/*//project/packages/mobile/node_modules/bser/index.js:292:10)
at /Users/user/*//project/packages/mobile/node_modules/bser/index.js:247:12
at processTicksAndRejections (internal/process/task_queues.js:79:11)
Emitted 'error' event on WatchmanWatcher instance at:
at Client.<anonymous> (/Users/user/*//project/packages/mobile/node_modules/metro/node_modules/jest-haste-map/build/lib/WatchmanWatcher.js:172:10)
at Client.emit (events.js:314:20)
at BunserBuf.<anonymous> (/Users/user/*//project/packages/mobile/node_modules/fb-watchman/index.js:107:12)
at BunserBuf.emit (events.js:314:20)
at /Users/user/*//project/packages/mobile/node_modules/bser/index.js:249:12
at processTicksAndRejections (internal/process/task_queues.js:79:11) {
watchmanResponse: {
error: 'std::__1::system_error: open: /Users/user/*//project/node_modules: No such file or directory',
version: '2021.12.06.00'
}
}

merto.config.js

以下の node_modules のところをコメントアウトすると watchman のエラーはでなくなりました。

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

module.exports = {
  watchFolders,
}

yarn androidでreact-native-screensのエラーが出る

こちらは結構ハマりました。

結果的に、 ext.kotlin_version ここのバージョンを上げる必要がありました。

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':react-native-screens:compileDebugKotlin'.

android/build.gradle

buildscript {
    ext.kotlin_version = '1.3.17'
}

以下のバージョンにしました。

buildscript {
    ext.kotlin_version = '1.4.10'
}

package.json

一応 react-native-screens のバージョンも上げておきました。

-    "react-native-screens": "^3.1.1",
+    "react-native-screens": "^3.10.1",

node.jsが/opt/homebrew/Cellar/node/xx.x.xになってしまうときがある

asdf で node.js のバージョンを管理しているのですが、たまに、以下のディレクトリではなく homebrew のほうを見に行ってしまうときがありました。

これは M1 でのみ発生し、 Intel のほうではなかった現象です。

以下のパスのを見てほしいのだが、

/Users/user/.asdf/shims/node

以下になってしまう。

/opt/homebrew/Cellar/node/17.2.0

よって、 brew でインストールした node.js を強制的に uninstall します。

brew uninstall --ignore-dependencies node

これで asdf でインストールしたほうを確実に見に行ってくれるようになりました。