57
34

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[Vue.js]npm run devのエラー解決方法[vue-cli]

Last updated at Posted at 2019-07-15

はじめに

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 の実行ができました。

package.json
"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

さいごに

どなたかの為になると幸いです。

57
34
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
57
34

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?