LoginSignup
1
0

More than 3 years have passed since last update.

Vueで書かれているリポジトリをcloneしてnpm run devするまでの流れ

Last updated at Posted at 2020-05-11

Vueで書かれているリポジトリをクローンしてnpm run dev
下記のようなエラーがでたので対応法をメモ

> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
internal/modules/cjs/loader.js:775
    throw err;
    ^
Error: Cannot find module 'webpack'
Require stack:
- /usr/local/lib/node_modules/webpack-dev-server/bin/webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:772:15)
    at Function.Module._load (internal/modules/cjs/loader.js:677:27)
    at Module.require (internal/modules/cjs/loader.js:830:19)
    at require (internal/modules/cjs/helpers.js:68:18)
    at Object.<anonymous> (/usr/local/lib/node_modules/webpack-dev-server/bin/webpack-dev-server.js:12:17)
    at Module._compile (internal/modules/cjs/loader.js:936:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:947:10)
    at Module.load (internal/modules/cjs/loader.js:790:32)
    at Function.Module._load (internal/modules/cjs/loader.js:703:12)
    at Function.Module.runMain (internal/modules/cjs/loader.js:999:10) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/usr/local/lib/node_modules/webpack-dev-server/bin/webpack-dev-server.js'
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?
npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/ユーザー名/.npm/_logs/2020-05-11T07_20_46_545Z-debug.log
MacBook:16:20:46 front $node_modules/.bin/webpack
bash: node_modules/.bin/webpack: No such file or directory

???なるほどねよくわからん
先輩にエラーが出たことを相談

$ npm install -g webpack-dev-server

とりあえずパッケージをグローバルインストールすることに
しかし

> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
The CLI moved into a separate package: webpack-cli
Please install 'webpack-cli' in addition to webpack itself to use the CLI
-> When using npm: npm i -D webpack-cli
-> When using yarn: yarn add -D webpack-cli
internal/modules/cjs/loader.js:775
    throw err;
    ^
Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- /usr/local/lib/node_modules/webpack-dev-server/bin/webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:772:15)
    at Function.Module._load (internal/modules/cjs/loader.js:677:27)
    at Module.require (internal/modules/cjs/loader.js:830:19)
    at require (internal/modules/cjs/helpers.js:68:18)
    at Object.<anonymous> (/usr/local/lib/node_modules/webpack-dev-server/bin/webpack-dev-server.js:65:1)
    at Module._compile (internal/modules/cjs/loader.js:936:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:947:10)
    at Module.load (internal/modules/cjs/loader.js:790:32)
    at Function.Module._load (internal/modules/cjs/loader.js:703:12)
    at Function.Module.runMain (internal/modules/cjs/loader.js:999:10) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/usr/local/lib/node_modules/webpack-dev-server/bin/webpack-dev-server.js'
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?
npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/ユーザー名/.npm/_logs/2020-05-11T08_07_47_816Z-debug.log

エラーコードが変わっている!!しかしエラーなのは変わらず、、、
ここでフォルダ構造を聞かれnode_moduleがないことが根本的な原因と判明
そこで

$ npm uninstall -g  webpack-dev-server webpack

上記のコードを実行して先ほどグローバルインストールしたパッケージを削除
その後package.jsonが存在するディレクトリ配下に移動して

$ npm install

して

$ npm run dev

したらできたー!ローカルサーバーが立ち上がりました!

原因

今回の原因としてnpm installをしていなかったことが原因でした。
僕の勝手思い込みでnode.jsをインストールしていたことによりnpm installをしなくてもいいんだろうと勝手に思い込んでいました。
ローカルサーバーを立ち上げるには外部からプラグインを引っ張ってくる必要がある。
そういったモジュールの管理をしているのがpackage.jsonっていうファイルらしい。

npm installっていうコマンドはpackage.jsonに記載しているものはそのフォルダに必要なモジュールを一括でダウンロードしてnode_modulesっていうフォルダに格納してくれるコマンドらしい。

なるほどなるほど。めっちゃいい勉強になりました!

1
0
0

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
1
0