Zenn
🤖

Vue CLIで作成したプロジェクトでnpm run serveを実行すると「MODULE_NOT_FOUND」で動かない場合の解決策

2023/12/15に公開
npm
error
Vue CLI
tech

発生したエラーについて

vue create(Vue CLI)で作成したプロジェクトで「npm run serve」を実行したところ、以下のようなエラーが発生しました

$ npm run serve

> vue-test-sample@0.1.0 serve
> vue-cli-service serve

'VueTestUtilsチュートリアル\jest-vue-test-utils-tutorial\vue-test-sample\node_modules\.bin\' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
node:internal/modules/cjs/loader:1051
  throw err;
  ^

Error: Cannot find module 'C:\Users\ユーザー名\OneDrive\デスクトップ\program\書籍\実践\@vue\cli-service\bin\vue-cli-service.js'
    at Module._resolveFilename (node:internal/modules/cjs/loader:1048:15)
    at Module._load (node:internal/modules/cjs/loader:901:27)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12)
    at node:internal/main/run_main_module:23:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}

Node.js v20.9.0

エラーの解消方法について

私の場合は、「npm run serve」を実行したディレクトリの上位の階層のディレクトリ名を変更することでエラーが解消しました。具体的には以下の通り、「&」を「_」に変更しました。

Jest&VueTestUtilsチュートリアル → Jest_VueTestUtilsチュートリアル
- "C:\Users\ユーザー名\OneDrive\デスクトップ\program\書籍\実践\Jest&VueTestUtilsチュートリアル\jest-vue-test-utils-tutorial\vue-test-sample"
+ （変更後）"C:\Users\ユーザー名\OneDrive\デスクトップ\program\書籍\実践\Jest_VueTestUtilsチュートリアル\jest-vue-test-utils-tutorial\vue-test-sample"

以下参考サイト１によると、ディレクトリ名に特殊な文字や記号などが含まれているとファイルパスがうまく読み取れなくなり、ファイルパスの認識エラーが発生する可能性があるため、ファイル名やディレクトリ名を「英語」「アンダースコア」「ダッシュ」のみの名前に変更するとよいとのことです。
他にも、解消方法がいくつか掲載されていたので名前を変更しても解決しない場合はそちらも試していただければと思います。
※参考サイト1に.bin内のvue-cli-serve.cmdのパスを変更する方法が掲載されていたのですが、よくわからず、コメントなどで教えていただけると嬉しいです

参考サイト

  1. vue プロジェクトについて: エラー モジュール「xxx\bin\vue-cli-service.js」解決策が見つかりません

  2. 「vue-cli-service」を解決する方法は、内部または外部コマンドとして認識されませんか？
    ※こちらはファイル名等は変えずに実行する方法が掲載されていました

Discussion