Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?

More than 1 year has passed since last update.

@tommy0218

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

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っていうフォルダに格納してくれるコマンドらしい。

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

0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
0
Help us understand the problem. What is going on with this article?