v4.0.0-head: No Overlay on error

[kroko]

• Operating System: macOS 10.15.7 (19H2)

• Node Version: v14.15.1

• NPM Version: 6.14.9

• webpack Version: 5.9.0

• webpack-dev-server Version: https://github.com/webpack/webpack-dev-server/tree/763cde106056f342dcc30b607308b378c479cdaa

• webpack-cli Version: 4.2.0

• Browser: Chrome 87.0.4280.67

• This is a bug

• This is a modification request

Code

Regarding this commit 763cde1

npm install github:webpack/webpack-dev-server#763cde106056f342dcc30b607308b378c479cdaa --save-dev

This in source

  console.logz('i am wrong');

will lead to this in browser console

index.js:13 Uncaught TypeError: console.logz is not a function
    at Module../src/index.js (index.js:13)
    at __webpack_require__ (bootstrap:21)
    at startup:8
    at startup:8

but no visible overlay.

// ----------------
// BASE CONFIG
let config = {
  // ...

  infrastructureLogging: {
    level: 'info'
  },
  stats: 'normal',

  // ...
};

// ----------------
// WEBPACK DEVSERVER CONFIG
config.devServer = {

  // ...
  client: {

    // ...

    overlay: {
      warnings: false,
      errors: true
    }
  },

  // ...

};

module.exports = config;

Expected Behavior

Overlay visible in HTML

Actual Behavior

No overlay in HTML.

For Bugs; How can we reproduce the behavior?

Just add console.logz('i am wrong');

For Features; What is the motivation and/or use-case for the feature?

[alexander-akait]

Sorry, it was never supported, it is feature, I am felling it is unnecessary, overlay for webpack bundling problems, not for runtime problems, you have dev tools with more abilities for this

[kroko]

Hmm.

is not a function errors do not produce overlay.

array.findz();
console.logz();
thisFunctionDoesNotExist();

However stuff like this will

  // do expression test with too many oooos
  let doValue = doooo {
    const one = 1;
    one + 1;
  };

Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: hidden/webpacktest-07-lint/src/index.js: Unexpected token, expected ";" (26:22)

  24 | const myArrowFunction = () => {
  25 |   // do expression test
> 26 |   let doValue = doooo {
     |                       ^
  27 |     const one = 1;
  28 |     one + 1;
  29 |   };

note that is not a function errors do not produce overlay even when babel-loader is disabled.

[kroko]

Sorry, it was never supported, it is feature, I am felling it is unnecessary, overlay for webpack bundling problems, not for runtime problems, you have dev tools with more abilities for this

given that a specific pull was done for it, wanted to try to help to test it :)

Maybe remove the feature altogether. Or if it is used in config by the coder, produce a warning of "depreciated" or smth.

[alexander-akait]

It is very useful when you write something like CSS, or when you use babel, you will see original code instead of generated

[kroko]

It is very useful when you write something like CSS, or when you use babel, you will see original code instead of generated

Damn, my bad, as docs say

Shows a full-screen overlay in the browser when there are compiler errors or warnings.

Sorry.

Suggesting addition for the docs

Shows a full-screen overlay in the browser when there are COMPILER errors or warnings.

😄

Closing.

[alexander-akait]

Let's keep open, I think we can implement this as feature under flag, i don't see many problems with this

[kroko]

Reopening.

[Xrumet]

Hi @alexander-akait, @kroko
Seems like the issue still there.
Initially I have wait for fix #2786 and it is fixed. I see the fix is merged into v4 that's why I decided to update dev server.
Currently I using:
"webpack": "^5.9.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "4.0.0-beta.0"

I can see error like this:

and this case triggered "overlay" for webpack-dev-server:v3.11 but not for v4.beta

I have investigated a bit, and may say that it is simply ignore option from configuration file.
If I manually modify file "node_modules\webpack-dev-server\client\default\index.js"
change:
useWarningOverlay: false,
useErrorOverlay: false,
to be
useWarningOverlay: true,
useErrorOverlay: true,

then everything worked as expected.
Seems like onSocketMessage->overlay method is not executed at all some-why.

[kroko]

@Xrumet it was marked to be looked in future as feature by @alexander-akait.

Wantend to suggest you to not use 4.0.0-beta.0 but some newer commit as things are getting fixed. Just beware that as of 763cde1 overlay key has to be under client.

// ----------------
// WEBPACK DEVSERVER CONFIG
config.devServer = {

  // ...
  client: {

    // ...

    overlay: {
      warnings: false,
      errors: true
    }
  },

  // ...

};

module.exports = config;

[Xrumet]

Ohh, OK, Thanks! Got it... @kroko, I have checked commit you provided - works well for me. Also checked latest master - there is another issue, will try to report it or prepare pull request.
Seems like - all I need to do is wait for next beta or release. Btw, do we know release date? I didn't found it... (

[Enchiridion]

I just tried the latest master and the overlay is working great for me. I'm glad this feature was added, I've previously used it on another site using webpack middleware and it's much easier to read than the console.
Is there a way to customize the overlay settings/colors? I'd like to change the font face and size.

[milanhawkins]

client: {
overlay: {
warnings: false,
errors: true
}
},

Thanks a lot for this @kroko, this fixed it for me.

[alexander-akait]

Close in favor #3689

[aryehb]

Is there a way to customize the overlay settings/colors? I'd like to change the font face and size.

It looks like that is hard-coded here, with no native way to set it programmatically.

You can use the Stylus extension to override the styles. E.g.:

#webpack-dev-server-client-overlay-div {
    font-size: unset !important;
}