webpack-dev-serverがCannot read property 'compile' of undefinedエラーを吐く

環境

• Rails 5.1.5
• node v8.5.0
• ruby 2.4.1

状況

上記の環境で、bin/webpack-dev-serverを行った場合、以下のようなエラーが発生し起動に失敗する。

TypeError: Cannot read property 'compile' of undefined
    at addCompilerHooks (/Users/shiba/workspace/rails_vue_first/node_modules/webpack-dev-server/lib/Server.js:71:15)
    at new Server (/Users/shiba/workspace/rails_vue_first/node_modules/webpack-dev-server/lib/Server.js:81:5)
    at startDevServer (/Users/shiba/workspace/rails_vue_first/node_modules/webpack-dev-server/bin/webpack-dev-server.js:398:14)
    at processOptions (/Users/shiba/workspace/rails_vue_first/node_modules/webpack-dev-server/bin/webpack-dev-server.js:361:5)
    at Object.<anonymous> (/Users/shiba/workspace/rails_vue_first/node_modules/webpack-dev-server/bin/webpack-dev-server.js:504:1)
    at Module._compile (module.js:624:30)
    at Object.Module._extensions..js (module.js:635:10)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)

原因

現在(2018/3/5時点)、webpackerがWebpack4.0に対応していないことが原因のようです。

解決策

対応がされるまで、webpack-dev-serverのバージョンを下げることでの対応となります。 以下のコマンドでダウングレードを行ってください。

yarn upgrade webpack-dev-server@^2.11.1

その後、もう一度bin/webpack-dev-serverを実行した結果、エラーが発生しなくなりました。

参考

github.com