error-overlay-webpack-plugin: Not seeing error overlay

Given the following files

package.json

"devDependencies": {
    "@babel/core": "^7.0.0-beta.40",
    "@babel/preset-env": "^7.0.0-beta.40",
    "@babel/preset-react": "^7.0.0-beta.40",
    "babel-loader": "8.0.0-beta.0",
    "error-overlay-webpack-plugin": "^0.1.3",
    "html-webpack-plugin": "^3.0.6",
    "webpack": "^4.1.1",
    "webpack-cli": "^2.0.11",
    "webpack-dev-server": "^3.1.1"
  },
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  }

webpack.config.js

const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ErrorOverlayPlugin = require('error-overlay-webpack-plugin')

module.exports = {
    mode: 'development',
    entry: ['./src/index.js'],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-react'],
                    },
                },
            },
        ],
    },
    plugins: [
        new ErrorOverlayPlugin(),

        new webpack.HotModuleReplacementPlugin(),

        new HtmlWebpackPlugin({
            template: './src/index.html',
        }),
    ],
    devServer: {
        hot: true,
        open: true,
    },
}

index.js

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
    <h1>{this.should.show.overlay}</h1>,
    document.getElementById('root'),
)

if (module.hot) module.hot.accept()

index.html

<!DOCTYPE html>
<html lang="en">
<body><div id="root"></div></body>
</html>

Running yarn webpack-dev-server

results in a console error, but no overlay

Uncaught TypeError: Cannot read property 'should' of undefined
    at eval (webpack:///./src/index.js?:9:76)
    at Object../src/index.js (http://localhost:8080/main.js:1383:1)
    at __webpack_require__ (http://localhost:8080/main.js:710:30)
    at fn (http://localhost:8080/main.js:95:20)
    at eval (webpack:///multi_./node_modules/error-overlay-webpack-plugin/lib/entry.js_(webpack)-dev-server/client?:4:18)
    at Object.0 (http://localhost:8080/main.js:1394:1)
    at __webpack_require__ (http://localhost:8080/main.js:710:30)
    at http://localhost:8080/main.js:762:37
    at http://localhost:8080/main.js:765:10

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 27
Comments: 34 (11 by maintainers)

Commits related to this issue

Add devtool option to README sample config Following from https://github.com/smooth-code/error-overlay-webpack-plugin/issues/8#issuecomment-404101038, I think this is a common enough issue that it's ... — committed to Limess/error-overlay-webpack-plugin by Limess 6 years ago

Most upvoted comments

Im not using react error boundaries, but also don’t see the overlay

+11

Drafter500 on May 15, 2018

Update: Got it to work.

Turns out you need to have use devtool: 'cheap-module-source-map' because of a crossorigin issue.

siddharthkp on Jul 11, 2018

This setup works for me FYI

const path = require('path');
const webpack = require('webpack');
const ErrorOverlayPlugin = require('error-overlay-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  devtool: 'cheap-module-source-map',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['@babel/react', '@babel/preset-env']
        }
      }
    ]
  },
  plugins: [new ErrorOverlayPlugin()]
};

alextrastero on Jul 13, 2018

@neoziro After change my webpack devtool to cheap-module-source-map, I got this error:

hronro on Jul 13, 2018

Nope, same thing.

empz on Apr 3, 2018

@siddharthkp thank you, I was struggling for a while now and I could not understand why it’s not working.

ioanungurean on Aug 27, 2018

I started having this “issue” when using ErrorBoundaries with React 16. React is handling the error now so I suspect it never makes it to the error overlay. If you’re using ErrorBoundaries I suspect you’ll need to handle this yourself and display some sort of error on the screen with the component stack trace when in development mode.

msteward on May 9, 2018

@siddharthkp that worked for me as well. Thank you (fyi webpack @4.17.2)

bitwhys on Sep 10, 2018

@siddharthkp good catch!

gregberge on Jul 11, 2018

issue persists

cricketnest on May 16, 2018

So if you use a ErrorBoundary, you should throw back the error to trigger the overlay.

I’m having a similar issue and I wonder where is the right place where to throw the error back? I tought to throw it from the ErrorBoundary component but clearly it doesn’t work.

gpbl on May 14, 2018

@msteward yes I think you are right, this plugin only catch uncaught exceptions. So if you use a ErrorBoundary, you should throw back the error to trigger the overlay.

gregberge on May 10, 2018