MENU

vue-cliのnpm run devでwebpack-dev-serverのエラー

プログラミング

はじめに

vue-cliを使ってVue.jsの開発をしていたら、あるときからnpm run dev実行時に↓のようなエラーが出てしまい開発用サーバが立ち上がらなくなりました。
（なんの操作をしていたときか忘れてしまいました。。）

$ npm run dev
> frontend@1.0.0 dev /Users/hogehoge/Develop/practice-flask-vue/frontend
> 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:583
    throw err;
    ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (/Users/hogehoge/Develop/practice-flask-vue/frontend/node_modules/webpack-dev-server/bin/webpack-dev-server.js:84:1)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! frontend@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the frontend@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!     /Users/hogehoge/.npm/_logs/2018-11-19T11_12_55_011Z-debug.log

webpack-cliのインストール

しばらくパッケージをアップデートしていないので、なぜ今のタイミングで

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

が出るのか不明ですが、ひとまず指示どおりにインストールします。

$ npm i -D webpack-cli
npm WARN url-loader@1.1.0 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-middleware@3.4.0 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-server@3.1.10 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN webpack-cli@3.1.2 requires a peer of webpack@^4.x.x but none is installed. You must install peer dependencies yourself.

+ webpack-cli@3.1.2
added 25 packages from 7 contributors and audited 34200 packages in 37.642s
found 0 vulnerabilities

インストールが完了しました。
webpack@^4.0.0をインストールせよと言われてしまいます。

$ npm run dev

> frontend@1.0.0 dev /Users/hogehoge/Develop/practice-flask-vue/frontend
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

TypeError: Cannot destructure property `compile` of 'undefined' or 'null'.
    at addHooks (/Users/hogehoge/Develop/practice-flask-vue/frontend/node_modules/webpack-dev-server/lib/Server.js:114:49)
    at new Server (/Users/hogehoge/Develop/practice-flask-vue/frontend/node_modules/webpack-dev-server/lib/Server.js:127:5)
    at startDevServer (/Users/hogehoge/Develop/practice-flask-vue/frontend/node_modules/webpack-dev-server/bin/webpack-dev-server.js:355:14)
    at processOptions (/Users/hogehoge/Develop/practice-flask-vue/frontend/node_modules/webpack-dev-server/bin/webpack-dev-server.js:309:5)
    at process._tickCallback (internal/process/next_tick.js:68:7)
    at Function.Module.runMain (internal/modules/cjs/loader.js:745:11)
    at startup (internal/bootstrap/node.js:266:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:596:3)

やっぱりまだだめみたいです。

webpack-dev-serverのダウングレード

TypeError: Cannot destructure property `compile` of 'undefined' or 'null'.

そこでこちらのエラーについて更にいろいろと調べてみると、同じようなissueがありました。

TypeError: Cannot read property 'compile' of undefined · Issue #1334 · webpack/webpack-dev-server · GitHub

1 - Upgrade webpack to v4, you must change the webpack.config.js file for compatibility. or
2 - Downgrade webpack-dev-server to exactly v3.0.0 as @Nufeen said.

やはり上で突っ込まれているように、v4以上にアップグレードするか、v3にダウングレードすれば直るようです。
webpackの知識はほぼ無く、webpack.config.jsを編集するのもハードルが高そうだったので今回はダウングレードして対応することとしました。

$ npm install -D webpack-dev-server@3.0.0
npm WARN webpack-cli@3.1.2 requires a peer of webpack@^4.x.x but none is installed. You must install peer dependencies yourself.
npm WARN webpack-dev-server@3.0.0 requires a peer of webpack@^4.0.0-beta.1 but none is installed. You must install peer dependencies yourself.

+ webpack-dev-server@3.0.0
added 37 packages from 16 contributors, removed 28 packages, updated 10 packages and audited 35284 packages in 30.206s
found 1 high severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details

インストール出来たので再度試してみます。

$ npm un dev


 DONE  Compiled successfully in 26990ms                                                    8:59:34 PM

 I  Your application is running here: http://localhost:8080

無事開発用サーバが起動しました。