この記事は、yoshitaku_jpの1人 Advent Calendar 2018 - Adventar の13日目の記事です。
tl;dr
TypeError: Cannot destructure property
compileof 'undefined' or 'null'.
が発生webpack-dev-server@3.0.0
をダウングレードして解決
エラー内容
TypeError: Cannot destructure property
compileof '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が上がっていました。
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を使うことが出来ました。