Expo(で作ったプロジェクト)が動かない "Error: Cannot find module '../../tools/PackageManager'"

11032 ワード
iOS reactnative 開発環境 Android expo Android テキストリンク

はじめに

普段はReactやVueをゴリゴリ書いているフロントエンジニアですが、モバイルにも興味が出てきたのでReactNativeにも手を出してみようと思いExpoをインストールしてみました。
ですが起動の段階でタイトルのエラーに引っかかったので解決方法を共有します。

発生したエラー内容

Expoで作成したプロジェクトでyarn startをした時に発生しました。

yarn run v1.12.3
$ expo start
Starting project at /Volumes/workspace/AwesomeProject
Expo DevTools is running at http://localhost:19002
Opening DevTools in the browser... (press shift-d to disable)
internal/modules/cjs/loader.js:638
    throw err;
    ^

Error: Cannot find module '../../tools/PackageManager'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/Volumes/workspace/AwesomeProject/node_modules/@react-native-community/cli/build/commands/install/install.js:10:46)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)

Metro Bundler process exited with code 1
Set EXPO_DEBUG=true in your env to view the stack trace.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

結論と解決方法

Macのボリュームを大文字/小文字で区別していることが原因でした。
Macのデフォルトのボリュームを使うか、新たにパーティションを切って大文字/小文字を区別しない設定で作成することで回避出来ます。

原因

WindowsやMacはデフォルトのボリューム設定ではファイルの大文字と小文字は区別しないため、下記のようなimportも可能です。

ディレクトリ構成

./App.js
./packageManager.js

App.js

// ファイルは名は小文字"p"だが、importのファイル名は大文字”P"
import PackageManager from "./PackageManager.js";

しかし、Linux等の場合はデフォルトで大文字小文字を区別するので、
AWS環境にデプロイしたら大量のエラーが・・・
なんて事が起こりえます。

そのため、私はMacのディスクユーティリティーからプログラミング用の大文字小文字を区別するパーティションを作成して、その中にワークスペースを作る習慣にしていたため今回の問題が発生しました。

エラーは誰が出しているのか

エラー文の途中にも出力されていますが、 @react-native-community/cli が出力しています。
ただし、 @react-native-community/cli 自体の修正は 2019/4 の段階でマージされているのですが、マージされたタイミングで メジャーバージョンが2.0 に上がりました。
expo-cliで生成されるpackage-lock.jsonを確認すると、 "@react-native-community/cli": "^1.2.1" となっているため、メジャーバージョンアップには対応出来ずバグが残ったままという結果となっています。

expo/expo-cli -> expo/react-native -> @react-native-community/cli
という順で参照しているので、expo/react-nativeが@react-native-community/cliのv2.0に対応するまで気長に待つしかなさそうです。