Zenn
💨

Dockerでインストールしたnpmパッケージが動かない時

2024/11/09に公開
Docker
Vite
tech

Dockerを使ってReact（Vite）とPostgreSQLの開発環境を構築しているときに、少しハマったことがありました。Docker内で依存パッケージをインストールしたにもかかわらず、ローカル環境で「モジュールが見つからない」というエラーが出るという現象です。原因と解決方法について、まとめてみます。

開発環境

  • MacBook Air (M2, 2022)（Apple Silicon）
  • OS: macOS Sonoma 14.5

構成

project-root/
├── frontend/
├── backend/
├── docker/
│   ├── frontend/
│   ├── backend/
│   └── db/
└── docker-compose.yml

問題が発生した状況

Dockerでnpm install tailwind-mergeを実行し、依存関係が追加されました。package.jsonにもtailwind-mergeが記載され、Docker環境ではエラーもなく正常に動作していました。

しかし、ローカルのエディタやブラウザで確認すると、tailwind-mergeが見つからないというエラーが発生。Dockerでは動くのに、ローカル環境ではtailwind-mergeがない状態として扱われているようでした。

原因

Dockerとローカル環境が独立しているため、Docker内でインストールした依存関係がローカルのnode_modulesには反映されていないことが原因でした。

Dockerでnpm installすると、Dockerコンテナ内のnode_modulesディレクトリに依存関係がインストールされますが、ローカルのnode_modulesには影響がありません。そのため、エディタやブラウザでの動作確認では、ローカル環境が依存関係の不足としてエラーを表示してしまいます。

解決方法

Docker内で依存関係を追加した場合、ローカル環境でも同じ依存関係をインストールする必要があります。以下の手順でローカルにも反映させましょう。

  1. Dockerで依存関係をインストール

    npm install tailwind-merge

    これでDocker環境内でtailwind-mergeが追加され、package.jsonにも反映されます。

  2. ローカル環境でもnpm installを実行

    cd frontend  # フロントエンドのディレクトリに移動
npm install  # ローカルのnode_modulesに依存関係を反映

    これにより、ローカルのnode_modulesにも同じ依存関係が追加され、エディタでのエラーが解消されます。

まとめ

Docker環境とローカル環境は独立しているため、Docker内でのnpm installはローカルのnode_modulesには反映されません。新しいパッケージを追加した場合は、Docker環境とローカル環境の両方で依存関係を揃えることで、開発時のエラーを防ぐことができます。特にDockerを活用した開発では、ローカルとコンテナのnode_modulesの違いに注意が必要です。

今後、Dockerでの開発中に依存関係を追加したら、ローカルでもnpm installを忘れずに実行することをお勧めします。同じような状況の方にとって参考になれば幸いです！

Discussion