事象
Dockerコンテナ内の環境にて、npm run serveを実行すると、下記のようなエラーが発生していました。
ERROR Failed to compile with 2 errors
This relative module was not found:
* ./src/main.js in multi (webpack)-dev-server/client/index.js (webpack)/hot/dev-server.js ./src/main.js, multi (webpack)/hot/dev-server.js (webpack)-dev-server/client/index.js ./src/main.js
環境
- Microsoft Windows 10 Pro
- Docker for Windows
- Visual Studio Code
- node.js : 12.18.2
- npm : 6.14.5
原因
筆者の場合、npm installを実行してもpackage.json内に含まれているdevDependenciesがインストールされておらず、必要なライブラリ（ここでは@vue/cli-service）が存在していなかったというのが原因でした。
解決策
node.js側の環境変数であるNODE_ENVをdevelopment（あるいはdev）にしてからnpm installを実行する必要がありました。
NODE_ENVを設定する方法は、①.コマンドラインからexportする方法と、docker-composeを使っている場合は②.docker-compose.xmlに記載する方法があります。
①.exportコマンドで設定する
下記のコマンドでNODE_ENVに環境値を設定できます。
# NODE_ENVを設定$ export NODE_ENV=development
# 設定した値を確認する$ echo$NODE_ENV
development
②.docker-compose.xmlのenvironmentキーに設定する
docker-composeでコンテナを立ち上げている場合、environmentキーを使って設定することができます。
version:'3'services:web:build:.ports:-"8080:8080"environment:-NODE_ENV=developmenttty:trueexportで設定したときと同様に、$NODE_ENVをechoすると設定値を確認すると、developmentが設定されているのが確認できるはずです。
問題の原因を特定するには？
今回の場合、package.jsonに記載されているパッケージが正しくインストールできていると早とちりし、「パスが通っていない」か「windowsでシンボリックリンクが使えないのが悪さしている」と思い込んでいたのが、原因の特定が遅れてしまった原因でした。
ちなみに、パッケージが正しくインストールされているかは、npm list --depth=0で確認することができます。
# インストールされているパッケージの一覧（一階層のみ）を表示$ npm list --depth=0
project@0.1.0 /app
+-- core-js@3.6.5
`-- vue@2.6.11
# core-js と vue しか入ってないやん！もし、筆者と同様にnpm run serveが正しく動作しない場合は、このコマンドで確認してみるといいかもしれません。