How to enable error display on browser sreen

[craigcosmo]

I'd like to show script errors like the screenshot below. Is there a way to do it with webpack devserver

Here is my webpack config

entry: './app/index.js',
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, buildFolder),
        publicPath: publicPath
    },
    devServer: {
        contentBase: buildFolder
    }

Here is I start the dev server:
webpack-dev-server --inline --hot

[SpaceK33z]

If you use http://localhost:7770, you'll get those errors like that. It means the app itself will be in an iframe though.

If you want to build this in your app, take a look at #542.

[SpaceK33z]

I'm closing this issue because of inactivity. Feel free to comment, and we can always re-open it again.

[craigcosmo]

I don't see how the reference #542 suggest a solution for this issue. Unless I don't understand it correctly.

[SpaceK33z]

create-react-app actually implemented exactly what you want two days ago: facebook/create-react-app#744. You could copy the code from there.

[lalitkapoor]

you can add react-dev-utils to your package.json and then add 'react-dev-utils/webpackHotDevClient' to your entry (before your app's starting point) - e.g.:

entry: {
    'app': [
      'react-hot-loader/patch',
      'react-dev-utils/webpackHotDevClient',
      './public/index.js'
    ]
  },

[SpaceK33z]

Note that since v2.3.0, you can use overlay: true in your devServer config. This is essentially the same as react-dev-utils.

[mikeaustin]

overlay: true doesn't seem to do anything for me. Am I doing something wrong?

"webpack-dev-server": "^2.9.2"

module.exports = {
  ...
  devServer: {
    overlay: true
  }
}

[craigcosmo]

overlay: true does work for me. Not all errors will be shown as overlay

[mikeaustin]

I have seen in rare occurrences. I thought it would be shown for all and any errors, but that doesn't seem to be the case.

[mikeaustin]

Ahh, it doesn't seem to capture runtime errors...?

"Uncaught ReferenceError: x is not defined"
"Uncaught TypeError: window.foo is not a function"

etc...

[JerryChin]

Can't capture runtime errors, what a big disappointment.

[duartealexf]

That does not make sense, of course it should not capture runtime errors!
What are try/catch blocks for, anyway?

[dfontenot]

For anyone with webpack 5.75.0 that is trying to enable / disable this feature:

devServer: {
  client: {
    overlay: false
  }
}