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っていうフォルダに格納してくれるコマンドらしい。
なるほどなるほど。めっちゃいい勉強になりました!