Vue-CLI 3でnpm run serveが失敗するときの解決方法

事象

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=development
    tty: true

exportで設定したときと同様に、$NODE_ENVをechoすると設定値を確認すると、developmentが設定されているのが確認できるはずです。

問題の原因を特定するには？

今回の場合、package.jsonに記載されているパッケージが正しくインストールできていると早とちりし、「パスが通っていない」か「windowsでシンボリックリンクが使えないのが悪さしている」と思い込んでいたのが、原因の特定が遅れてしまった原因でした。

ちなみに、パッケージが正しくインストールされているかは、npm list --depth=0で確認することができます。

# インストールされているパッケージの一覧（一階層のみ）を表示
$ npm list --depth=0
[email protected] /app
+-- [email protected]
`-- [email protected]
# core-js と vue しか入ってないやん！

もし、筆者と同様にnpm run serveが正しく動作しない場合は、このコマンドで確認してみるといいかもしれません。