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

Created on 23 Oct 2020  路  16Comments  路  Source: webpack/webpack-dev-server


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?

image

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

Most helpful comment

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

All 16 comments

For maintainers only:

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

No problems in webpack

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

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

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?

Would you plan to fix it?

I will send a fix.

Fixed in v4 branch (release will be soon)

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

We already have the issue for v4

ok great, thank you

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?

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

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

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.

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

Was this page helpful?
0 / 5 - 0 ratings

Related issues

movie4 picture movie4  路  3Comments

tulika21-zz picture tulika21-zz  路  3Comments

gimmi picture gimmi  路  3Comments

subblue picture subblue  路  3Comments

hnqlvs picture hnqlvs  路  3Comments