【解決】npm run devでwebpack-dev-serverのエラー

この記事は、yoshitaku_jpの1人 Advent Calendar 2018 - Adventar の13日目の記事です。

tl;dr

  • TypeError: Cannot destructure propertycompileof 'undefined' or 'null'.が発生
  • webpack-dev-server@3.0.0 をダウングレードして解決

エラー内容

TypeError: Cannot destructure propertycompileof 'undefined' or 'null'.が発生しました。

発生の状況

npm run devを実行したらエラー

上記のエラーはnpm run devの実行時に出力されました。

yoshitaku$ npm run dev

> vue_firebase_auth_test@1.0.0 dev /Users/takuyayoshimura/workspace/vue_firebase_auth_test
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

TypeError: Cannot destructure property `compile` of 'undefined' or 'null'.
    at addHooks (/Users/takuyayoshimura/workspace/vue_firebase_auth_test/node_modules/webpack-dev-server/lib/Server.js:114:49)
    at new Server (/Users/takuyayoshimura/workspace/vue_firebase_auth_test/node_modules/webpack-dev-server/lib/Server.js:127:5)
    at startDevServer (/Users/takuyayoshimura/workspace/vue_firebase_auth_test/node_modules/webpack-dev-server/bin/webpack-dev-server.js:355:14)
    at processOptions (/Users/takuyayoshimura/workspace/vue_firebase_auth_test/node_modules/webpack-dev-server/bin/webpack-dev-server.js:309:5)
    at internalTickCallback (internal/process/next_tick.js:77:7)
    at process._tickCallback (internal/process/next_tick.js:47:5)
    at Function.Module.runMain (internal/modules/cjs/loader.js:778:11)
    at startup (internal/bootstrap/node.js:300:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:826:3)

解決までの過程

TypeError: Cannot destructure property compile of 'undefined' or 'null'.で調べる

GitHubのWebpackのところへissueが上がっていました。

github.com

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.

「webpackのバージョンを4にあげてwebpack.config.jsを編集するか、3.0.0にダウングレードをしてください」と書いてありました。

解決策

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

今回はnpm install --save-dev webpack-dev-server@3.0.0 でダウングレードしてみます。

yoshitaku$ npm install --save-dev webpack-dev-server@3.0.0
npm WARN ajv-keywords@2.1.1 requires a peer of ajv@^5.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.
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 26 packages from 8 contributors, removed 49 packages, updated 10 packages and audited 31156 packages in 22.405s
found 1 high severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details

npm audit fixが気になりますが、実行すると再度バージョンが上がってしまうので、一旦思いとどまります

バージョンが下がったので、npm run dev を実行してみます。

yoshitaku$ npm run dev

> vue_firebase_auth_test@1.0.0 dev /Users/takuyayoshimura/workspace/vue_firebase_auth_test
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 95% emitting

 DONE  Compiled successfully in -1970ms                                                                                                                                                                            8:32:14

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

無事になおってwebpack-dev-serverを使うことが出来ました。