Next.jsで react/jsx-runtime エラーが消えなかった話
問題
ハッカソンの学習で、公式ドキュメントを使って学習をしている最中の学生です。Next.js 開発中に以下のエラーが発生しました。
[ELIFECYCLE] Command failed.
また、VSCode上で JSX 全体に赤線が表示され、
react/jsx-runtime が見つかりません
というエラーも発生しました。
pnpm dev
で、実行はできるので、開発に大きな影響はなかったのですが、VScode上に大量の赤線が残り続けることが嫌だったので、修正方法を調べました。
環境：
- WSL(Ubuntu)
- OneDrive 配下（これがあとあと原因になっている気がします）
- pnpm 使用
対策
以下を実施。
-
latestをやめて version を固定 -
pnpm→npmに変更 -
node_modulesを削除 - lockファイルを削除
- 再インストール
実行コマンド：
rm -rf node_modules
rm -f pnpm-lock.yaml
rm -f package-lock.json
npm install
npm run dev
結果
-
react/jsx-runtimeエラー解消 - JSX の赤線消滅
-
npm run dev正常起動
考察
今回の原因は、単純に pnpm が悪いというより、
WSL + OneDrive + pnpm
の組み合わせにあった可能性が高いです。
pnpm の特徴
pnpm は高速・軽量化のために、
- symlink
- hard link
を多用します。
そのため、
- WSL
- OneDrive
- Windows/Linux 跨ぎ
のような環境では、依存解決や TypeScript の参照が不安定になることがあるそうです。
一方で、大規模開発や monorepo では非常に強力で、近年は企業採用も増えていると私のLLM君は言っていました。
npm の特徴
npm は Node.js 標準の package manager であり、環境依存の問題が比較的少ないです。
特に、
- 学習用途
- 小〜中規模開発
- WSL + OneDrive 環境
では安定しやすいと感じました。そのため私のような初学者は、pnpmのような高速なものを使うよりは、安定して動くnpmを使った方がよさそうという結論です（今のところは）。
今回の学び
package manager 自体よりも、
開発環境との相性
が重要でした。
今後の流れ
1. OneDrive 配下での開発を見直し
可能であれば、
~/projects
など Linux 側へプロジェクトを配置し、WSL ネイティブ環境で開発する必要があります（大学の容量ギリギリノートPCなので、これはまた考えます）。
2. pnpm へ再移行
環境を整理した後、再度 pnpm を試します。
rm -rf node_modules
rm -f package-lock.json
pnpm install
pnpm dev
3. 脆弱性対応
現在、一部 package に deprecated / vulnerability warning が存在します。
特に：
next@15.1.6
には既知脆弱性があるため、安定動作確認後に patched version へ更新予定です。
ただし、
npm audit fix --force
は major upgrade を含む可能性があるため、慎重に行います。
（この辺りはLLM君に出力してもらっていて、私の知識では何を言っているのかわからないので、学習してから取り組む必要がありそうです）
補足
以下の warning は、自分が package.json に直接書いたものではなく、
依存ライブラリのさらに依存
であることが多いらしいです。
npm warn deprecated glob@7.2.3