Consider using webpack-dev-server overlay option for more helpful compile errors.

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

Currently if webpack fails to build, the webpack-rails gem dutifully tries to relay the appropriate error message as a rails stack trace. This isn't super helpful and the reason for the error isn't always clear since the error output is capped at 5 lines:

with-rails-error

webpack-dev-server offers another way to display compiler error messages with the overlay feature inspired by the wonderful create-react-app overlay:

with-overlay

See: https://github.com/webpack/webpack-dev-server/releases/tag/v2.3.0
https://github.com/webpack/webpack-dev-server/pull/764
https://twitter.com/keeskluskens/status/825008478536228865

Since we're already on the latest version, we can enable this with by simply adding this to our webpack.config.js:

  config.devServer = {
    overlay: true
  };

However we'll also need a way to disable the current behavior of the webpack-rails gem. I'm hopeful that we can achieve this without needing to fork the gem.

Edited by 🤖 GitLab Bot 🤖