インストールしたはずのnpmパッケージがDockerだと動かなかった時

Dockerを使ってNext.jsの環境構築をしているとき、「Next.js」と表示されるかっこいい初期画面が出るまでは順調に進んでいました。が、必要なnpmパッケージをDockerに追加できたと思ったあと、もう一度コンテナをビルドしてローカルで確認するとエラーが...

Docker「npmｶﾞﾐﾂｶﾗﾅｲﾖｰ!!!」

Dockerを使わず単純にnpm run devで実行してローカルで確認するときちんと動作するのにdocker compose up -dだと何故か必要なnpmパッケージの一部がないと言われたので、そのときの対処法を自分用にまとめました。

開発環境

MacBook Pro (M3, 2023)（Apple Silicon）
OS: macOS Sonoma 14.4

Dockerfile

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "run", "dev"]

docker-compose.yml

services:
  app:
    build:
      context: .
      dockerfile: ./docker/Dockerfile
    ports:
      - "3000:3000"
    volumes:
      - .:/app
      - /app/node_modules
    environment:
      - NODE_ENV=development

対処法

とりあえずコンテナを停止してターミナルで

docker ps -a

で表示されるコンテナの名前をコピーして

docker exec -it <コンテナの名前> sh

としてコンテナ内に入り、

cd /app
npm list --depth=0

これでコンテナ内にあるnpmパッケージの一覧が出るのですが、実行してみると...

my-nextjs-app@0.1.0 /app
+-- UNMET DEPENDENCY @radix-ui/react-dialog@^1.1.2
+-- @types/node@20.17.9
+-- @types/react-dom@18.3.1
+-- @types/react@18.3.13
+-- eslint-config-next@15.0.3
+-- eslint@8.57.1
+-- framer-motion@11.13.1
+-- UNMET DEPENDENCY lucide-react@^0.466.0
+-- motion@11.13.1
+-- next@15.0.3
+-- postcss@8.4.49
+-- react-dom@18.3.1
+-- react@18.3.1
+-- tailwindcss@3.4.16
`-- typescript@5.7.2

npm error code ELSPROBLEMS
npm error missing: @radix-ui/react-dialog@^1.1.2, required by my-nextjs-app@0.1.0
npm error missing: lucide-react@^0.466.0, required by my-nextjs-app@0.1.0
npm error A complete log of this run can be found in: /root/.npm/_logs/2024-12-06T05_39_29_618Z-debug-0.log

どうやら@radix-ui/react-dialogとlucide-reactがpackage.jsonにリストされているが、実際にはインストールされていないようで、

docker-compose run --rm app npm config set legacy-peer-deps true
docker-compose run --rm app npm i

を試して依存関係の競合を無視してパッケージをインストールした後に再びビルドしたところ、うまくいきました。

まとめ

詳しい原因がわからなかったので、ご存じの方がいらしたら是非教えていただきたいです！