React NativeだけでなくNode.jsも入門段階の森田ユウゴです。

React Nativeで開発環境を構築中、プロジェクト作成でつまづき試行錯誤しました。
この記事では、プロジェクト作成時に発生したエラーの原因と、その解決方法を記録します。

プロジェクト作成のエラー状況について

その中で、PowerShellで「npx create-expo-app プロジェクト名」を実行しても下記のようにエラーが発生しました。

PS I:\マイドライブ\ReactNative> npx create-expo-app@latest my-test-app
Creating an Expo project using the default template.

To choose from all available templates pass in the --template arg:
  $ npx create-expo-app --template

To choose from all available examples pass in the --example arg:
  $ npx create-expo-app --example

× Something went wrong in downloading and extracting the project files: Cannot parse an empty JSON string
EmptyJsonFileError: Cannot parse an empty JSON string
node:internal/bootstrap/node:123
        validateInteger(value, 'code');
        ^

TypeError [ERR_INVALID_ARG_TYPE]: The "code" argument must be of type number. Received type string ('EJSONEMPTY')
    at process.set [as exitCode] (node:internal/bootstrap/node:123:9)
    at process.exit (node:internal/process/per_thread:177:24)
    at C:\Users\junas\AppData\Local\npm-cache\_npx\956a30255ff895e3\node_modules\create-expo-app\build\index.js:116:736
    at <anonymous>
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
    at async run (C:\Users\junas\AppData\Local\npm-cache\_npx\956a30255ff895e3\node_modules\create-expo-app\build\index.js:116:704) {
  code: 'ERR_INVALID_ARG_TYPE'
}

Node.js v22.13.0

トラブルシューティング

先に結論として「ネットワークドライブ(Google Drive)を作業フォルダにしていることが」原因でした…。

私自身がどのように対応したか思い出すために、トラブルシューティングを終えたまでの内容を時系列で記載します。

試したコト① キャッシュのクリア

コンピュータはいつの間にかゴミがたまって、プログラムが動作しないということが良くあります。
下記のコマンドでキャッシュが消せるようなので試してみました。

npm cache clean --force

エラーは無くなった！！

でも、フォルダ内に作成された「package.json」が"0KB"で空のファイルです。
その結果、次の工程で「npx expo start」をしても失敗します。

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.
(node:16556) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
┌───────────────────────────────────────────────────────────────────────────┐
│                                                                           │
│   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>                                                    │
│                                                                           │
└───────────────────────────────────────────────────────────────────────────┘
Starting project at I:\マイドライブ\ReactNative\my-test-app
Unable to find expo in this project - have you run yarn / npm install yet?

試したコト② PowerShellを管理者権限で実行

ダメでした。
「npx create-expo-app プロジェクト名」の時点で「Cannot parse an empty JSON string」です。

※ここでキャッシュ削除しても失敗するので、何か別の原因があるのかもしれないとハマってしまった

試したコト③ 最新版を指定

下記のとおり、create-expo-appコマンドの後ろに"@latest"を付けることで、最新版を指定できるらしい。

npx create-expo-app@latest my-todo-app

ダメでした。
「npx create-expo-app プロジェクト名」の時点で「Cannot parse an empty JSON string」です。

試したコト④ VPNで日本国内経由で接続

私は台湾在住です。
まさか…ですが、台湾からの接続は制限されている？という仮説のもと、Nord VPNで日本国内経由で接続してみました。

ダメでした。
「npx create-expo-app プロジェクト名」の時点で「Cannot parse an empty JSON string」です。

試したコト⑤ 【解決】作業フォルダをローカルドライブに変更

結論として、Google Driveのフォルダを利用していたことが原因でした。

私は普段、Google Driveにデータを格納しています。
ドライブレターも振られていいて、PowerShellでcdを出来るので気にしていなかったです…。

ホームディレクトリのDocments配下に作業フォルダを作成して、コマンドを実行したら成功しました。

振り返り

Google Driveの仕様が分からないのですが、npxコマンドを利用時にドライブ情報(ローカルかネットワークか)を見たりしているのですかね？

今回は試せてはいませんが下記の際にもローカルフォルダを指定してみる必要があるかもしれません。

NASなどのネットワークフォルダを利用
substコマンドなどで仮想ドライブを利用