Not seeing error overlay about error-overlay-webpack-plugin HOT 34 CLOSED

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

from error-overlay-webpack-plugin.

Update: Got it to work.

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

from error-overlay-webpack-plugin.

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()]
};

from error-overlay-webpack-plugin.

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

from error-overlay-webpack-plugin.

Nope, same thing.

from error-overlay-webpack-plugin.

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.

from error-overlay-webpack-plugin.

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

from error-overlay-webpack-plugin.

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

from error-overlay-webpack-plugin.

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.

from error-overlay-webpack-plugin.

issue persists

from error-overlay-webpack-plugin.

@siddharthkp good catch!

from error-overlay-webpack-plugin.

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

from error-overlay-webpack-plugin.

Pasting my config incase I have some incompatible plugins:

  devtool: 'source-map',
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.IgnorePlugin(/webpack-stats\.json$/),
    new webpack.EnvironmentPlugin(['XXX']),
    new webpack.DefinePlugin({
      __DEVELOPMENT__: true,
      __DEVTOOLS__: true
    }),
    new webpack.IgnorePlugin(/^buffer|crypto|fs$/, /analyserLib\.js/),
    new ErrorOverlayPlugin(),
    new HtmlWebpackPlugin({
      template: 'index.html.ejs'
    })
  ],
  devServer: {
    hot: false,
    inline: true,
    port: PORT,
    historyApiFallback: true,
    stats: { colors: true }
  }

from error-overlay-webpack-plugin.

I seem to not be able to set 'mode'. is this a webpack 4 option?

from error-overlay-webpack-plugin.

@hipstersmoothie yep, see https://medium.com/webpack/webpack-4-mode-and-optimization-5423a6bc597a

from error-overlay-webpack-plugin.

HtmlWebpackPlugin is probably the source of the problem, can you confirm it?

from error-overlay-webpack-plugin.

Removing HtmlWebpackPlugin had no effect

from error-overlay-webpack-plugin.

Same problem on Webpack 3

var Webpack = require('webpack');
var Config = require('webpack-config').default;
var ExtractTextPlugin  = require('extract-text-webpack-plugin');
var ErrorOverlayPlugin = require('error-overlay-webpack-plugin');
module.exports = new Config().extend('./webpack.config.base.js').merge({
    devtool: "source-map",
    output: {
        filename: '[name].js'
    },
    plugins: [
        new ErrorOverlayPlugin(),
        new Webpack.LoaderOptionsPlugin({
            minimize: false,
            debug: true,
        }),
        new ExtractTextPlugin({
            filename: 'main.css',
            allChunks: true,
        }),
    ]
});

from error-overlay-webpack-plugin.

I can confirm this too. Not seeing the overlay.
Webpack 4.4.1
React 16.3.0

const HtmlWebPackPlugin = require("html-webpack-plugin");
const ErrorOverlayPlugin = require("error-overlay-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      },
      {
        test: /\.css$/,
        use: [{ loader: "style-loader" }, { loader: "css-loader" }]
      }
    ]
  },
  plugins: [
    new ErrorOverlayPlugin(),
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};

from error-overlay-webpack-plugin.

@emzero where are your entry in your config?

from error-overlay-webpack-plugin.

@neoziro Using webpack 4 defaults (./src).

from error-overlay-webpack-plugin.

@emzero can you try to specify it and see if it is the source of your problem?

from error-overlay-webpack-plugin.

Anyone got this working yet? Still not working for me @neoziro

from error-overlay-webpack-plugin.

Just set it up on another project and it works. It takes some time to display but still works.

from error-overlay-webpack-plugin.

@emzero it must be HtmlWebpackPlugin the source of the problem.

from error-overlay-webpack-plugin.

Any updates?

from error-overlay-webpack-plugin.

I don't have time to investigate it, if you experience this issue I will be glad if you could debug it to try what's going on. On my side, I use this plugin and it works but I do not use HtmlWebpackPlugin.

from error-overlay-webpack-plugin.

I can't reproduce it, if someone provide a real not working example I could take a look.

from error-overlay-webpack-plugin.

I think it was a browser relative issue, I hop it will be fixed by #15. Feel free to open a new issue if you experience the problem again.

from error-overlay-webpack-plugin.

@siddharthkp use devtool: 'cheap-module-source-map' is still not working for me ☹️

from error-overlay-webpack-plugin.

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

I still have the same issue with webpack 4 and react. Have you managed to fix it?

from error-overlay-webpack-plugin.

This setup works for me FYI

Where is this file you're changing? I'm having this same problem with React 17 with a freshly created app with react-create-app and it's driving me nuts... but the project doesn't really have much in the way of configs other than package.json, I assume it's all hidden deep inside react-scripts or some such.

from error-overlay-webpack-plugin.

This setup works for me FYI

Where is this file you're changing? I'm having this same problem with React 17 with a freshly created app with react-create-app and it's driving me nuts... but the project doesn't really have much in the way of configs other than package.json, I assume it's all hidden deep inside react-scripts or some such.

@joshgoebel my message is from 2018. AFAIK with create-react-app you would need to eject in order to have a custom webpack config, actually with create-react-app you don't need this webpack plugin... 🤔

from error-overlay-webpack-plugin.

It seems the error reporting is still there, it's just been changed to support fewer cases that before (now they instead log to console)... I found another issue where people are discussion the merits of the change since it seems like a step backwards in some ways vs what we had prior.

from error-overlay-webpack-plugin.