ライブラリ周りのエラーを入れ直しで何とかする

何があった？

Next.js + docker で開発している環境に途中からライブラリを追加したら、npm周りのキャッシュで半日溶かした。めちゃくちゃ悔しいので書きました。

急いでる人向けに結論

dockerのコンテナ、ボリューム、イメージ、ローカルのリポジトリ
全部消して入れなおして解決しました。
消さなくていいものも混ざっている気がするけど、もうどこがどこに影響しているか分からない。

詳しい状況

ここで出ていたエラーメッセージを順に追っていきます。

エラー1 extraneous

コンテナの中でnpm installして、インストールされたことを確認。
dockerfileにも書き込んで、docker compose upで立ち上がったか調べると…
npm ls でめちゃくちゃ警告が出ている！！
extraneousがたくさん。これはpackage.jsonのdependenciesやdevdependenciesに記載されていないがnode_modulesに存在するものらしい。
参考：https://tech.withsin.net/2016/12/27/npm-list-extraneous/
参考：https://dev.to/rajeshkumaryadavdotcom/removing-extraneous-npm-packages-43n4

解決

npm pruneした。
node_modulesを消して入れなおした.
vercelのデプロイも通って一安心！

エラー2 Next.jsのビルドエラー

と思ったところローカル環境が動かなくなった。

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of RootLayout.

RootLayout以下のコンポーネントを全部確認する…？いやさすがにそんなことはしない。
でも、ライブラリ追加前はうまく動いていたので、インポート/エクスポートやパスが間違っているとは考えづらい。となるとnpmのキャッシュ周り。

解決

冒頭の通り、全部消して入れなおした。dockerを使っているのであれば、どこに何のキャッシュが残っているのか分かりづらいので、全消しが最速ルートでした。

• リポジトリを消す
• docker コンテナを消す
• docker イメージを消す（これはやらなくてもよかったかも…？）
• docker ボリュームを消す
• リポジトリをクローンする
• docker compose up
• 解決！

途中で試行錯誤したこと

無駄ではなかったのかもしれないが今回の解決には直接結びつかなかった者たちです。

コンテナ内でやったこと

npm prune
rm -rf node_modules package-lock.json

この後、docker compose build --no-cacheしたがホスト側にnode_modulesが残っていたので効果なし。
ホスト内で試行錯誤する。

ホスト内でやったこと

npm prune
npm cache clean --force
rm -rf node_modules package-lock.json .next

これも効果なし。

まとめ

試行錯誤と結論の差分から考えると、ボリュームあたりに鍵がありそうです。
.npmかな？

↑こちら、記事を書いた後に原因と思われる部分を発見しました。
検証の上、後ほど追記します。

トラブルシューティングは「出てきたエラーメッセージをちゃんと読む」の次に、「エラーメッセージが示す可能性が、どこを向いているか探る」のが大事なのかもと思います。
こういう力ってどう身につけるんだろうか。経験と知識量かな？

トラブルシューティング、うまくなりたいです！！