yarn workspace を使った monorepo 環境で React Native(Expo) を動かすためにやったこと #reactnative

普通に yarn run expo start を実行するだけでは動かなかったので、
出たエラーとそれを解決するまでにしたことをメモとして残しておきます。

エラーが起きるまでの経緯

expo init packages/app を実行
生成された packages/app/package.json に name と version を追加（expo init 中に yarn install でコケていたのでその対応）
yarn workspace app install を実行
yarn run expo start を実行し、iOS の Expo アプリを起動
dev tool 上に、以下のエラーが表示される

Error: Cannot resolve entry file: The `expo.entryPoint` field defined in your `app.json` points to a non-existent path.
    at getEntryPointWithExtensions (~/workspace/monorepo-sample/node_modules/@expo/config/src/paths/paths.ts:74:15)
    at getEntryPoint (~/workspace/monorepo-sample/node_modules/@expo/config/src/paths/paths.ts:53:10)
    at Object.determineEntryPoint (/@expo/xdl@57.5.2/src/Exp.ts:41:17)
    at manifestHandler (/@expo/xdl@57.5.2/src/Project.ts:2053:28)

環境

Node.js v12.14.1
yarn v1.21.1
ディレクトリ構成

/
+- node_modules/
   +- api/
   +- expo/
   +- react-native/
+- packages/
   +- api/ # for Express
   +- app/
      +- node_modules/
      +- app.json
      +- App.tsx
      +- package.json
   +- web/ # for React SPA 
+- package.json
+- yarn.lock

原因

packages/app/node_modules/expo/ が存在していなかった
-> yarn workspace の仕組みにより、root 側の node_modules 以下に expo ディレクトリが移動していたため

解決方法

expo-yarn-workspaces パッケージを利用すれば解決しました
https://github.com/expo/expo/tree/master/packages/expo-yarn-workspaces

書いてあるとおりやったこと
1. yarn workspace app add -D expo-yarn-workspaces を実行
2. packages/app/package.json を修正
  - scripts.postinstall の追加と、main の設定
3. packages/app/metro.config.js の作成
4. packages/app/app.json に packagerOpts.config を追加
5. （yarn run postinstall を実行）
書いてなかったけどやったこと
- packages/app/app.json から expo.entryPoint を削除
  - expo start の実行時には、package.json の main よりもこちらの設定が優先される模様。
    package.json の main と同じ値に変更しても動いたが、消しても package.json の設定値にフォールバックしたので、
    二重メンテを避けるという意味でも削除した。

参考

https://github.com/expo/expo/tree/master/packages/expo-yarn-workspaces

その他

試したけど解決しなかった方法

cd packages/app/node_modules
ln -s ../../../node_modules/expo expo
cd ..
yarn run expo start

出たエラー

Error: Unable to resolve module `./node_modules/expo/AppEntry` from ``: 

None of these files exist:
  * node_modules/expo/AppEntry(.native|.ios.expo.ts|.native.expo.ts|.expo.ts|.ios.expo.tsx|.native.expo.tsx|.expo.tsx|.ios.expo.js|.native.expo.js|.expo.js|.ios.expo.jsx|.native.expo.jsx|.expo.jsx|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.wasm|.native.wasm|.wasm)
  * node_modules/expo/AppEntry/index(.native|.ios.expo.ts|.native.expo.ts|.expo.ts|.ios.expo.tsx|.native.expo.tsx|.expo.tsx|.ios.expo.js|.native.expo.js|.expo.js|.ios.expo.jsx|.native.expo.jsx|.expo.jsx|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.wasm|.native.wasm|.wasm)
    at ModuleResolver.resolveDependency (~/workspace/monorepo-sample/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:163:15)
    at ResolutionRequest.resolveDependency (~/workspace/monorepo-sample/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
    at DependencyGraph.resolveDependency ~/workspace/monorepo-sample/node_modules/metro/src/node-haste/DependencyGraph.js:282:16)
    at ~/workspace/monorepo-sample/node_modules/metro/src/lib/transformHelpers.js:267:42
    at Server.<anonymous> (~/workspace/monorepo-sample/node_modules/metro/src/Server.js:1088:41)
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (~/workspace/monorepo-sample/node_modules/metro/src/Server.js:99:24)
    at _next (~/workspace/monorepo-sample/node_modules/metro/src/Server.js:119:9)
    at processTicksAndRejections (internal/process/task_queues.js:94:5)