はじめに
Vueのプロジェクトを立ち上げる際に、npm run dev
コマンドが実行できず、
ググってもなかなか原因がわからず詰まってしまったので、
自分が解決できた対処法を書いておきます。
環境
vue: 2.5.11
問題
npm run dev
をすると、
$ npm run dev
> myproject@1.0.0 dev .../myproject
> cross-env NODE_ENV=development webpack-dev-server --open --hot
internal/modules/cjs/loader.js:638
throw err;
^
Error: Cannot find module 'webpack-cli/bin/config-yargs'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Module.require (internal/modules/cjs/loader.js:690:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object.<anonymous> (.../myproject/node_modules/webpack-dev-server/bin/webpack-dev-server.js:64:1)
at Module._compile (internal/modules/cjs/loader.js:776:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! myproject@1.0.0 dev: `cross-env NODE_ENV=development webpack-dev-server --open --hot`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the myproject@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! .../.npm/_logs/2019-07-15T03_23_00_762Z-debug.log
上記のようなエラーがでてきました。
webpack-cli/bin/config-yargs
をインストールしようとするもうまく行かず、
にっちもさっちも行かなくなっておりました。
原因
どうやら package.json
内で確認できる、webpack
, webpack-cli
, webpack-dev-server
の
verの組み合わせが適切でないと、エラーがでる模様。
以下のver(記事を書いた段階での最新ver)に更新することで、 npm run dev
の実行ができました。
"webpack": "^4.35.3",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2"
解決方法
ターミナルで以下コマンドを実行することで解決できました。
$ npm isntall --save-dev webpack@latest
↓
$ npm install webpack-cli -D
↓
$ npm isntall --save-dev webpack-dev-server@latest
↓
$ npm install vue-loader@latest
さいごに
どなたかの為になると幸いです。