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

[xkelvinx666]

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

[webpack-bot]

For maintainers only:

• webpack-4
• webpack-5
• bug
• critical-bug
• enhancement
• documentation
• performance
• dependencies
• question

[alexander-akait]

No problems in webpack

[thormeier]

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)));

[alexander-akait]

Yes, but we need to keep compatibility with webpack@4, so need to check messages[0].message? messages[0].message : messages[0]

[xkelvinx666]

Yes, but we need to keep compatibility with webpack@4, so need to check messages[0].message? messages[0].message : messages[0]

Would you plan to fix it?

[ckken]

Would you plan to fix it?

[snitin315]

I will send a fix.

[alexander-akait]

Fixed in v4 branch (release will be soon)

[jimblue]

Hi @alexander-akait,
Is it possible to re open this issue as V4 isn't released yet.
Thank you 😄

[alexander-akait]

We already have the issue for v4

[jimblue]

ok great, thank you

[szegheo]

Hmm.. Reading the above it should be ok/fixed in Webpack 5.26.1 (I'm using now), but I see "Failed to compile." only. Is it only for me?

[jimblue]

@coderars when @alexander-akait was telling above that this issue will be fixed in V4, he was talking about webpack-dev-server V4

[neemzy]

Is it supposed to be fixed in webpack-dev-server@3? I'm facing this issue right now.

[jimblue]

Is it supposed to be fixed in webpack-dev-server@3? I'm facing this issue right now.

@neemzy If you're using Webpack 5 you have to use webpack dev server with the latest beta version.

[neemzy]

@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.

[jordanbtucker]

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

[EvgenyLeukhin]

I think, this is not Webpack 5 problem, this is problem with version of webpack-dev-server.
You may try to install "webpack-dev-server": "^4.0.0-beta.3" to fix it.

[neemzy]

@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.