webpack-dev-server: Webpack 5 dev server doesn't show detail error in overlay

Bug report

the dev server doesn’t show detail error in overlay in webpack 5

What is the current behavior?

the overlay message doesn’t show the compiler error, maybe the error scheme change in webpack 5?

If the current behavior is a bug, please provide the steps to reproduce.

git clone https://github.com/cvgellhorn/webpack-boilerplate
vi webpack.dev.js # add overlay in devServer
npm run dev

What is the expected behavior?

show the detail error like webpack4

Other relevant information: webpack version: 5.2.0 Node.js version: 14.8.0 Operating System: mac os 10.14.6 Additional tools: npm v6

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 16
Comments: 19 (5 by maintainers)

Most upvoted comments

@jimblue Why? Neither README says so. I’m kinda weirded out by the fact using a non-stable version of the dev server with the latest stable version of Webpack itself would be mandatory.

neemzy on Apr 9, 2021

@EvgenyLeukhin I understand, but as I stated above, I don’t see any good reason for encouraging people to use a beta version of the dev server with a stable version of Webpack rather than backporting the fix.

neemzy on Jun 23, 2021

I agree with @neemzy. How about releasing the fix has a hotfix for v3 while everyone waits for v4 to get released?

jordanbtucker on May 2, 2021

We already have the issue for v4

alexander-akait on Feb 8, 2021

Just encountered the exact same and tracked it down to client/overlay.js:L115:

function showMessage(messages) {
  ensureOverlayDivExists(function (div) {
    // Make it look similar to our terminal.
    div.innerHTML = "<span style=\"color: #".concat(colors.red, "\">Failed to compile.</span><br><br>").concat(ansiHTML(entities.encode(messages[0])));
  });
}

Inspecting the error messages shows that they are actually objects containing a message key. It’s working when I change it to:

div.innerHTML = "<span style=\"color: #".concat(colors.red, "\">Failed to compile.</span><br><br>").concat(ansiHTML(entities.encode(messages[0].message)));

thormeier on Oct 27, 2020