Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

普段は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のデフォルトのボリュームを使うか、新たにパーティションを切って大文字/小文字を区別しない設定で作成することで回避出来ます。
スクリーンショット 2019-07-25 13.16.29.png

原因

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に対応するまで気長に待つしかなさそうです。

masaki-shinkawa0303
JavaでJavaJavaしてたらいつのまにかjavascriptおじさんになってたディアン・ケトおばさん
https://msk-s.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away