World Hacker（ぎょうざブログ）

みなさんどうも、こんばんみ～。某ぎょうざです。

はい、今更ながらReact Nativeアプリケーションの開発を簡素化する際に便利なフレームワークおよびプラットフォーム

Expo（エキスポ）を利用する際に、ぎょうざが躓いたところを備忘録として記録しておきます。

同じようなケースあるいは現象で困っている方の参考になれば幸いです。

【目次】

• 現象：Expo は、React Native の開発環境のセットアップが簡単
• 原因：多くの便利なSDKが提供、UIコンポーネントやAPIラッパーなど多くの便利なライブラリやモジュールが提供、エミュレータ、デバイス、またはWebでアプリケーションをプレビューするためのツールも提供
• 解決策：npx create-expo-app@latest

• 現象：初めてVScodeのターミナル（PowerShell）上でnpx create-expo-app@latestしてnpm startを実行したとき、上記エラーが表示される
  • 以下、詳細なエラー内容
  Copy

  Error: Cannot find module 'metro/src/lib/TerminalReporter'
  Require stack:
  - ~~~開発ディレクトリ~~~\node_modules\@expo\cli\build\src\start\server\metro\TerminalReporter.js
  - ~~~開発ディレクトリ~~~\node_modules\@expo\cli\build\src\start\server\metro\MetroTerminalReporter.js
  - ~~~開発ディレクトリ~~~\node_modules\@expo\cli\build\src\start\server\metro\instantiateMetro.js
  - ~~~開発ディレクトリ~~~\node_modules\@expo\cli\build\src\start\server\metro\MetroBundlerDevServer.js
  - ~~~開発ディレクトリ~~~\node_modules\@expo\cli\build\src\start\server\DevServerManager.js
  - ~~~開発ディレクトリ~~~\node_modules\@expo\cli\build\src\start\startAsync.js
  - ~~~開発ディレクトリ~~~\node_modules\@expo\cli\build\src\start\index.js
  - ~~~開発ディレクトリ~~~\node_modules\@expo\cli\build\bin\cli
  - ~~~開発ディレクトリ~~~\node_modules\expo\bin\cli
  Error: Cannot find module 'metro/src/lib/TerminalReporter'
  Require stack:
  - ~~~開発ディレクトリ~~~\node_modules\@expo\cli\build\src\start\server\metro\TerminalReporter.js
  - ~~~開発ディレクトリ~~~\node_modules\@expo\cli\build\src\start\server\metro\MetroTerminalReporter.js
  - ~~~開発ディレクトリ~~~\node_modules\@expo\cli\build\src\start\server\metro\instantiateMetro.js
  - ~~~開発ディレクトリ~~~\node_modules\@expo\cli\build\src\start\server\metro\MetroBundlerDevServer.js
  - ~~~開発ディレクトリ~~~\node_modules\@expo\cli\build\src\start\server\DevServerManager.js
  - ~~~開発ディレクトリ~~~\node_modules\@expo\cli\build\src\start\startAsync.js
  - ~~~開発ディレクトリ~~~\node_modules\@expo\cli\build\src\start\index.js
  - ~~~開発ディレクトリ~~~\node_modules\@expo\cli\build\bin\cli
  - ~~~開発ディレクトリ~~~\node_modules\expo\bin\cli
      at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1144:15)
      at Function.Module._load (node:internal/modules/cjs/loader:985:27)
      at Module.require (node:internal/modules/cjs/loader:1235:19)
      at require (node:internal/modules/helpers:176:18)
      at UpstreamTerminalReporter (~~~開発ディレクトリ~~~\node_modules\@expo\cli\build\src\start\server\metro\TerminalReporter.js:26:55)
      at Object.<anonymous> (~~~開発ディレクトリ~~~\node_modules\@expo\cli\src\start\server\metro\TerminalReporter.ts:45:27)
      at Module._compile (node:internal/modules/cjs/loader:1376:14)
      at Object.Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
      at Module.load (node:internal/modules/cjs/loader:1207:32)
      at Function.Module._load (node:internal/modules/cjs/loader:1023:12)

• 原因：metroというパッケージがインストールされていない
• 解決策：VScodeのターミナル（PowerShell）でnpm install --save-dev metroを実行する

• 現象：パッケージ古いよ～、とVScodeのターミナル（PowerShell）上で指摘される
• 原因：パッケージが古い
  • ぎょうざの今回の場合は、expo-routerというパッケージが古かったみたいです
  Copy

  The following packages should be updated for best compatibility with the installed expo version:
    expo-router@3.5.24 - expected version: ~4.0.9
  Your project may not work correctly until you install the expected versions of the packages.

• 解決策：ターミナル上でnpx expo install --fixを実行したら、上記の指摘が表示されなくなりました

• 現象：expo install <~~~> で下記エラーが表示される
  Copy

  expo: The term 'expo' is not recognized as a name of a cmdlet, function, script file, or executable program.
  Check the spelling of the name, or if a path was included, verify that the path is correct and try again.

• 原因：expo install <~~~>したときに下記エラーが出たので、（※後にexpo-cliは不要だったことが判明）npm install --global expo-cli でパッケージを追加した。しかし下記の通り、expoのSDK 46以降はnpx expo <command> でコマンド入力対応すればよいとのこと
  Copy

  PS D:\~~~開発ディレクトリ~~~> expo install expo-linear-gradient expo-status-bar
  WARNING: The legacy expo-cli does not support Node +17. Migrate to the new local Expo CLI: https://blog.expo.dev/the-new-expo-cli-f4250d8e3421.
  ┌───────────────────────────────────────────────────────────────────────────┐
  │                                                                           │
  │   The global expo-cli package has been deprecated.                        │
  │                                                                           │
  │   The new Expo CLI is now bundled in your project in the expo package.    │
  │   Learn more: https://blog.expo.dev/the-new-expo-cli-f4250d8e3421.        │
  │                                                                           │
  │   To use the local CLI instead (recommended in SDK 46 and higher), run:   │
  │   › npx expo <command>                                                    │
  │                                                                           │
  └───────────────────────────────────────────────────────────────────────────┘
  Installing 2 SDK 52.0.0 compatible native modules using npm.
  > npm install
  
  up to date, audited 1207 packages in 3s
  
  107 packages are looking for funding
    run `npm fund` for details
  
  5 low severity vulnerabilities
  
  To address all issues (including breaking changes), run:
    npm audit fix --force
  
  Run `npm audit` for details.

• 解決策：npx expo install ~~~でコマンドを入力するようにする

Expoは、React Nativeでより簡素化した開発をするのに便利なフレームワークおよびプラットフォームです。
お手軽にモバイルアプリケーションをクロスプラットフォーム開発
（※Android、iOSの両方で動くアプリを同時に作る）したい方におすすめです。

ここまで読んでいただき、ありがとうございました。

以上、ぎょうざでした。