本記事のあらすじ

個人開発を進めているプロダクトで起きたことです。
以下のように、node_modulesをボリュームにマウントしています。

※docker-compose.yml

service:
  nestjs:
    build:
      context: ./api
      dockerfile: Dockerfile
    volumes:
      - ./api/nest-api:/app
      - nestjs_node_modules:/app/node_modules
    ports:
      - '3000:3000'
    networks:
      - app-networks

networks:
  app-networks:
    driver: bridge

volumes:
    nestjs_node_modules:

volumes:の項目で、nestjsのディレクトリとnode_modulesをそれぞれボリュームにマウントしています。

node_nodulesをボリュームにマウントすると、、、

すると、エディタでは以下の画像のように表示されてしまいます。

見て欲しいのは1行目にある赤い波線の箇所です。
エディタからは、モジュールまたはそれに対する型宣言が見つからないと言われてしまいました。
画像のファイルは、エントリポイントであるmain.tsですがあくまで一例です。
他のどのファイルを見ても同じ出力がされてしまいます。

アプリケーション自体は問題なく動きます。リクエストに対してレスポンスも返してくれました。あくまでエディタが問題を示してくれています。

解決策

結論、Dev Containsersという拡張機能に頼ることにしました。
簡単に言うと、VSCodeごとコンテナの中に突っ込んじゃおうぜ、みたいな感じです。
コンテナに入ると、ボリュームを参照できるため、エディタ側からの問題出力も改善されるということです。

以下の記事を参考にしました。
VSCode&Docker Volumeにおけるnode_modules問題を解決する

セッティングについて

この拡張機能をVSCodeからインストールしてください。

その後、使いたいプロジェクトのルートディレクトリに以下のディレクトリとファイルを作成してください。

.devcontainerディレクトリ
./.devcontainer/.devcontainer.jsonファイル

この.devcontainer.jsonにもろもろの設定をするわけですが、僕は以下のように書きました。

{
    //適当なプロダクト名を
    "name": "〇〇",

    //このファイルからdocker-compose.ymlまでの相対パス
    "dockerComposeFile": "../docker-compose.yml",

    //入りたいコンテナのサービス名
    "service": "nestjs",

    //コンテナのワーキングディレクトリ
    "workspaceFolder": "/app"
}

その後、左下のアイコンから、「コンテナで再度開く」を選択してください。
VSCodeごとコンテナに入り、ワーキングディレクトリを開きながら、マウントされたnode_modulesをエディタが読み込みながら作業を進めることができます。

終わりに

僕は最近エンジニアのポッドキャストを聞くことにハマっています。
以下のポッドキャストが面白かったのでぜひ。
Apple podcastから聴くことができます。

Stirpe凄えってなります。