DockerでTypeScript環境を構築する際に遭遇したエラーと対処法

こんにちは！今回はDockerでTypeScript環境を構築しようとした際に発生したエラーと、その解決方法について備忘録として残しておきます。

発生したエラー

Docker環境でNext.jsをセットアップしようとしたところ、以下のエラーに遭遇しました。

An error occurred in next/font.

Error: Cannot find module '@tailwindcss/oxide-linux-x64-gnu'
Require stack:
- /app/node_modules/@tailwindcss/oxide/index.js
- /app/node_modules/@tailwindcss/postcss/dist/index.js
...

見た感じ、@tailwindcss/oxide-linux-x64-gnu が見つからないとのこと。最初は「依存関係の問題かな？」と思いましたが、いろいろ調べて試行錯誤した結果、原因がわかりました。

エラーの原因

このエラーの原因は大きく分けて2つ。

1. Dockerのボリューム設定によって node_modules が適切に管理されていない。
2. optionalDependencies に必要なモジュールが含まれておらず、自動インストールされない。

特に、Docker環境では node_modules の扱いがローカルと異なるため、思わぬトラブルに繋がりやすいですね。

解決方法

1. Dockerのボリューム設定を見直す

docker-compose.yml や Dockerfile で node_modules をボリュームとして指定している場合、これが問題になっている可能性があります。ボリューム設定を削除すると解決する場合があります。

修正前（問題のある設定）

docker-compose.yml
volumes:
  - .:/app
  - /app/node_modules  # これを削除！

この /app/node_modules のボリューム指定を削除すると、エラーが解消されることが多いです。

2. package.json に optionalDependencies を追加

package.json に以下を追加することで、@tailwindcss/oxide-linux-x64-gnu や lightningcss-linux-x64-gnu が自動的にインストールされるようになります。

修正後（package.json の追記）

"optionalDependencies": {
  "@tailwindcss/oxide-linux-x64-gnu": "^4",
  "lightningcss-linux-x64-gnu": "^1"
}

これで問題なく動作するはず！

まとめ

DockerでNext.js環境を構築するときに @tailwindcss/oxide-linux-x64-gnu のエラーに遭遇したら、以下の点を確認。

✅ volumes に /app/node_modules を指定していないか？（削除する）
✅ package.json の optionalDependencies に @tailwindcss/oxide-linux-x64-gnu と lightningcss-linux-x64-gnu を追加したか？

今回のエラーでハマった方の参考になれば幸いです！