react-dev-utils < 12 depends on a vulnerable version of immer. 12.0.0 fixed this issue. This is a major version upgrade though.

when I update to 0.1.7 , my project was broken.
here is the error message FYI

and version 0.1.6 works fine for me.

webpack: 4.26.1

/* eslint-disable */
var path = require("path");
var webpack = require("webpack");

var HtmlWebpackPlugin = require("html-webpack-plugin");
var ErrorOverlayPlugin = require("error-overlay-webpack-plugin");
var FriendlyErrorsWebpackPlugin = require("friendly-errors-webpack-plugin");
var autoprefixer = require("autoprefixer");

var config = require("./config");

module.exports = {
  mode: "development",
  devtool: "cheap-module-source-map",
  entry: [
    "webpack-dev-server/client?/",
    "webpack/hot/dev-server",
    // require.resolve('react-dev-utils/webpackHotDevClient'),
    // require.resolve('react-error-overlay'),
    "./src/index.js",
  ],
  output: {
    publicPath: "/",
    path: __dirname + "/static/js/",
    filename: "main.js",
  },
  module: {
    rules: [
      {
        test: /\.(html)$/,
        use: {
          loader: "html-loader",
        },
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [
          "babel-loader",
          {
            loader: "eslint-loader",
            options: {
              emitWarning: true,
            },
          },
        ],
      },
      {
        test: /\.(css|scss)$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: true,
              sourceMap: true,
              localIdentName: "[local]__[hash:8]",
            },
          },
          {
            loader: "postcss-loader",
            options: {
              plugins: [
                autoprefixer({
                  browsers: ["ie >= 8", "last 4 version"],
                }),
              ],
              sourceMap: true,
            },
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: true,
            },
          },
        ],
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name].[ext]",
              outputPath: "static/media/",
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new ErrorOverlayPlugin(),
    new FriendlyErrorsWebpackPlugin({
      compilationSuccessInfo: {
        messages: ["You application is running here http://localhost:" + config.port],
        notes: ["^_^ ./"],
      },
      clearConsole: true,
    }),
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      template: "public/index.html",
    }),
  ],
};

Hi,

Using "error-overlay-webpack-plugin": "^0.2.0" and "webpack": "^4.30.0", I got this error:

Error: We currently do not inject our entry code into single-file anonymous entries.
Please use a multi-main (array) or object-form entry setting for now.
at adjustEntry (PATH\node_modules\error-overlay-webpack-plugin\lib\index.js:56:11)

After removing error-overlay-webpack-plugin everything works fine.

Hey there!

Can't wait for it to work for me, but you're assuming entry is an Array, which it wouldn't be when entry it explicitly set to an object, for multiple entry chunks. Trying to .unshift on it obviously fails.

If entry is an object you should iterate over its Object.entries(entry) key/value pairs, normalize values as arrays and unshift in each of these, I guess.

I'm not sure if it's intentional or not but the fact that the package version is 0.y.z means that any change is considered a major semver change (https://semver.org/#spec-item-4) which interferes with automatic dependency management tools (like npm update) which tend to strictly follow semver.

If you consider this package stable, please consider incrementing to version 1!

Hi,

I have very simple react starter kit. I followed your simple instruction to add error-overlay-webpack-plugin then I add throw new Error('Oops!'); to Home component's constructor to test your plugin, but it doesn't work and I got empty page.

Hello!

This package hasn't seen any dependency updates since some time, which may lead to security issues. It would be great if we can get a more recent version published, that is up-to-date (must not necessary with webpack5, but at least the other deps).

Thanks!

Found that delay while using this plugin.

I think more of the reason is devtool option
devtool: 'cheap-module-source-map'

https://webpack.js.org/configuration/devtool/

kindly refer this screenshot.

Will it is possible to make it work with devtool option which is built and rebuild options is fast and faster

Basically I have a question is like what is the dev tools do and what it's every option does which are in screenshot?

any thoughts, comments...
Please comment.
Thanks.

Hi, I tried to include your plugin in my app but I could not find a way. There is no error or something similar. When I try to raise an error on purpose nothing happens. I can only see the stack trace in the console.

Did you try with react-hot-loader? Maybe I''m missing something.

Following the instructions in the README:

npm i --save-dev @types/error-overlay-webpack-plugin

Then in my webpack config I do:

import ErrorOverlayPlugin from 'error-overlay-webpack-plugin';
...
plugins: [
    new ErrorOverlayPlugin(),

When I start the webpack-dev-server I get this error:

TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at adjustEntry (/website/node_modules/error-overlay-webpack-plugin/src/index.js:64:12)
    at /website/node_modules/error-overlay-webpack-plugin/src/index.js:65:26
    at Array.forEach (<anonymous>)
    at adjustEntry (/website/node_modules/error-overlay-webpack-plugin/src/index.js:64:24)
    at /website/node_modules/error-overlay-webpack-plugin/src/index.js:65:26
    at Array.forEach (<anonymous>)
    at adjustEntry (/website/node_modules/error-overlay-webpack-plugin/src/index.js:64:24)
    at /website/node_modules/error-overlay-webpack-plugin/src/index.js:21:7
    at Hook.eval (eval at create (/website/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:16)

I look into the node_modules/error-overlay-webpack-plugin folder but I only find dist and not src.

Hey hey!
Great module!
Will there be any API for adding custom themes?

Right now, there is quite a noticeable delay in overlay showing up because it waits until sourcemap is fetched and parsed. Can I somehow show the compiled version of stacktrace in the overlay until that process is done, so that the overlay opens up immediately on error? Just like redbox-react.

Webpack supports webpack.config.ts these days. It would be very helpful to publish some typings. Ideally, these would be bundled in this package in the published sources.

Alternatively, one could (independently) publish to DefinitelyTyped to provide the types.

What is the appetite here for either:

1. Converting src to TypeScript
2. Adding hand created .d.ts files

when using webpack 4, tip this error:

webpack Dev Server Invalid Options

options should NOT have additional properties

Is it true for only eval sourcemap or all eval-based sourcemaps like cheap-module-eval-source-map?

I'm using multi-compiler build with express and webpack-dev-middleware + webpack-hot-middleware.
I've added this plugin for each webpack config but I only see the native webpack-hot-middleware overlay. Is there something more that needs to be done? Or right now there is no support for this configuration?
Maybe this can be added? I could try to help if someone pointed me at what needs to be done to make it work.

Code here is not correct anymore.

webpack-dev-server has sockPath option since 3.2.0 and sockHost, sockPort options since 3.4.0. It would be nice if this plugin can get options from webpack config, or at least allowed these to be customizable so user can set both options same.

Seems overlay doesn't work with latest webpack-dev-server v4.1.0.

Error:

 - options has an unknown property 'before'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, setupExitSignals?, static?, watchFiles?, webSocketServer? }

this line is broken:

Currently, the plugin is using the sockjs-client for devServer which was default in webpack-dev-server@3.

webpack-dev-server@v4 changed the default to ws, it would be great if the plugin can support both. Otherwise we have errors in console with webSocketServer: 'ws'

In Mac OS system, the vscode editor cannot be opened by browser error, and there is no prompt

It would be great to not have an invasive overlay appear for every error. If we could specify a function that filters out errors we want to pass through this would be super useful.

We throw network errors, which get caught and handled by our error boundaries. So we'd like to not see overlays in this case, which is considered working perfectly:

filter(error: any, caught: boolean) {
  return !caught && typeof error.status !== number;
}

I'm using devServer with proxy, so the url I access is not localhost:port but something like project.test etc. and it tries to fetch http://project.test/sockjs-node/info which results in 404, where it should instead try to reach http://localhost:port/sockjs-node/info. HMR, overlay and everything else seems to work fine, but there's this constant 404 error about url not found.

Is there something I'm missing in the configuration for this to access the correct route? I'm using v0.2.0

When importing into an esm module:

(node:29176) UnhandledPromiseRejectionWarning: ReferenceError: require is not defined in ES module scope, you can use import instead
    at file:///<...>/node_modules/error-overlay-webpack-plugin/dist/index.mjs:1:32

The index.mjs file is implemented as:

const errorOverlayMiddleware = require("react-dev-utils/errorOverlayMiddleware");
const chunkPathBasic = require.resolve("./entries/basic.mjs");
const chunkPathDevServer = require.resolve("./entries/devserver.mjs");

This seems like an invalid import. I don't think it is related to #93, as this appears to be updating .cjs files, rather than .mjs.

For my workaround, in my webpack I have created a shim error-overlay-shim.js file that to force the import of eowp as cjs

//
// The MJS exports of error-overlay use require, and aren't valid
// in a module.  Shimming with a .js file forces us to import cjs version
const ErrorOverlayPlugin = require('error-overlay-webpack-plugin')

module.exports = ErrorOverlayPlugin;

EDIT: Seems this explains it:

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "querystring": require.resolve("querystring-es3") }'
	- install 'querystring-es3'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "querystring": false }

I need to show errors on display, but i want to use laravel mix, can your extension show errors with laravel mix?

Everything works fine in "webpack": "^4.1.3".
In "webpack": "^5.1.3" this error appears:

I get an error when using webpack 5 with this plugin.

The chrome error console says:
Error: Iframe has not been created yet.

Total app is reloading after error thrown from the plugin why

I've set it up in my test project according to the Usage section and when I try a reference error as in the example, it works correctly. However, if I for example remove random closing tag in JSX, things break:

If you look at the second image, the weird part is
GET https://localhost:3000/babel/parser/lib/index.js 404 (Not Found) which is requested from "node_modules/react-error-overlay". this breaks things. If I create similar SyntaxError in a create-react-app test app, this doesn't happen and a proper Failed to compile error appears in the overlay. Any ideas?

error-overlay-webpack-plugin uses a version of react-dev-utils that has unsafe browserslist version.
We will need this fixed first: facebook/create-react-app#10928

My react project wasn't created by create-react-app . I used error-overlay-webpack-plugin as it was described in this documentation, but I can not see my app errors with style.

I get a 404 error when clicking on the code displayed in the overlay. I am testing this plugin out on a basic project created in TypeScript using Webpack 4 and Webpack server dev 3.9.0.

webpack.config.js:

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

module.exports = {
    entry: './src/ts/app.ts',
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node-modules/
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/dist'
    },
    plugins: [new ErrorOverlayPlugin()],
    devtool: 'inline-source-map'
};

Console output:

Recently started getting the above error when using the error-overlay-webpack-plugin. It is probabaly happening due to this issue on react-error-overlay since error-overlay-webpack-plugin does not pin react-error-overaly to 6.0.9 so now new installations are getting the latest [email protected].

Possible to do any fixes for the above issue in this package?

it shows errors but if you click in the browser it doesn't go to the code editor

const path = require("path");
const webpack = require("webpack");
const HTMLwebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetPlugin = require("optimize-css-assets-webpack-plugin");
const TerserWebpackPlugin = require("terser-webpack-plugin");
const ErrorOverlayPlugin = require("error-overlay-webpack-plugin");

const isDev = process.env.NODE_ENV === "development";
const isProd = !isDev;

const cssLoader = (extra) => {
  const loaders = [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        hmr: isDev,
        reloadAll: true,
        publicPath: "../",
      },
    },
    {
      loader: "css-loader",
      options: {
        url: true,
      },
    },
  ];

  if (extra) {
    loaders.push(extra);
  }

  return loaders;
};

module.exports = {
  context: path.resolve(__dirname, "src"),
  mode: "development",
  entry: {
    index: "./index.js",
  },
  output: {
    filename: isDev ? `js/[name].js` : `js/[name].[contenthash:8].chunk.js`,
    path: path.resolve(__dirname, "build"),
  },
  devServer: {
    port: 4200,
    hot: isDev,
  },

  optimization: {
    moduleIds: "hashed",
    splitChunks: {
      chunks: "all",
      name: false,
    },
    minimizer: [].concat(
      isProd
        ? [
            new OptimizeCssAssetPlugin(),
            new TerserWebpackPlugin(),
          ]
        : []
    ),
  },
  resolve: {
    extensions: [".js", ".json"],
  },
  plugins: [
    new HTMLwebpackPlugin({
      template: "./index.html",
      minify: {
        collapseWhitespace: isProd,
      },
    }),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin([

      {
        from: path.resolve(__dirname, "src/favicon.ico"),
        to: path.resolve(__dirname, "build"),
      },
    ]),
    new MiniCssExtractPlugin({
      filename: isDev ? `[name].css` : "css/[name].[hash:8].css",
    }),
    new ErrorOverlayPlugin(),
  ],

  devtool: isDev ? "cheap-module-source-map" : "",
  module: {
    rules: [
      {
        test: /\.css$/,
        use: cssLoader(),
      },

      {
        test: /\.(png|jpg|svg|gif)$/,
        loader: "file-loader",
        options: {
          outputPath: "img",
        },
      },
      {
        test: /\.(ttf|woff|woff2|eot)$/,
        use: ["file-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: cssLoader("sass-loader"),
      },
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env", "@babel/preset-typescript"],
          plugins: ["@babel/plugin-proposal-class-properties"],
        },
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env", "@babel/preset-react"],
              plugins: ["@babel/plugin-proposal-class-properties"],
            },
          },
          "eslint-loader",
        ],
      },
    ],
  },
};

It's going to be a little while before my org can upgrade to Webpack 4, but I'd love to give this a shot now. Based on this comment, I'm curious if it would work with older version of Webpack?

Hi,

I'm trying to use this on a React (not CRA) project using a custom webpack config. I implemented it as shown in the README but when I navigate to a test page that has an error I get a blank screen and this error in the console:

For the webpack devtool config value I tried both cheap-module-source-map and source-map and same issue.

For context, I was already using react-error-overlay version 6.0.9 (one before the process error) and it was working fine when used like this from the run time code:

if (ENV === 'dev') {
  import('react-error-overlay').then(({ startReportingRuntimeErrors }) => {
    startReportingRuntimeErrors({});
  });
}

But using this webpack plugin would be preferred, any ideas how to solve this? 🙏

If webpack configuration is written in typescript, then there is an error on the absent type definitions.

Whenever I get an error, the overlay takes quite a bit to show up as it seems that the component is fetched asynchronously. How do I preload this component?

Hello, I am trying your plugin but not working. It is seems it is neccessary to use webpack-dev-server, is it true? I use Webpack-serve (https://github.com/webpack-contrib/webpack-serve).
Thanks for reply.

As we know wepback@5 had been published some days ago, I hope that you can update error-overlay-webpack-plugin to compatible with latest webpack, thank you

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

I read this: https://github.com/smooth-code/error-overlay-webpack-plugin#usage but it's not working.

Dependences

typescript: 3.1.2,
ts-loader: 5.3.3,
webpack: v4,
react: v16.8,

Hello,

I am using ErrorOverlayPlugin in a lot of projects and I cannot get it to work in Internet Explorer 11 (have not tried other versions).

My configuration:

{
  entry: ["react-hot-loader/patch", "./src/index.js"],
  mode: "development",
  module: {
...
}
  plugins: [
    new ErrorOverlayPlugin(),
]

The error I'm seeing is:

SCRIPT1002: Syntax error
File: bundle.js, Line: 19347, Column: 57

Line 19347 starts here:

(0, _reactErrorOverlay.setEditorHandler)(errorLocation => {
  // Keep this sync with errorOverlayMiddleware.js
  fetch(_launchEditorEndpoint2.default + '?fileName=' + window.encodeURIComponent(errorLocation.fileName) + '&lineNumber=' + window.encodeURIComponent(errorLocation.lineNumber || 1) + '&colNumber=' + window.encodeURIComponent(errorLocation.colNumber || 1));
});

Dependencies:

  "dependencies": {
    "babel-polyfill": "^6.1.19",
    "prop-types": "^15.6.1",
    "react": "^16.3.2",
    "react-dom": "^16.3.2"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.2.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "case-sensitive-paths-webpack-plugin": "^2.1.2",
    "css-loader": "^0.28.11",
    "error-overlay-webpack-plugin": "0.1.4",
    "eslint": "^4.19.1",
    "eslint-config-react-app": "^2.1.0",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-flowtype": "^2.46.3",
    "eslint-plugin-import": "^2.11.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-react": "^7.7.0",
    "file-loader": "^1.1.11",
    "image-webpack-loader": "^4.2.0",
    "less": "^3.0.2",
    "less-loader": "^4.1.0",
    "mini-css-extract-plugin": "^0.4.0",
    "react-dev-utils": "5.0.1",
    "react-hot-loader": "^4.1.1",
    "react-svg-loader": "^2.1.0",
    "style-loader": "^0.21.0",
    "uglifyjs-webpack-plugin": "^1.2.5",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.15",
    "webpack-dev-server": "^3.1.3",
    "webpack-merge": "^4.1.2",
    "webpack-notifier": "^1.6.0"
  }

.babelrc:

{
  "presets": ["env", "react", "stage-2"],
  "plugins": ["react-hot-loader/babel"]
}

The only workaround I've found so far is to simply remove ErrorOverlayPlugin from my webpack.dev.js when I want to test it in IE, but I would like to find a more elegant way.

Does anyone know how to get around this?

when i install the module it is in es7. this caused me to spend the last day grappling with node version and trying to transpile the webpack plugin to no avail.

I would love it if when the the build is run through babel if you could transfrom Object.entries as well. I feel the dist/ folder should only have es3 in it and require no additional transpiling.

This is what happens when I use your plugin Access to XMLHttpRequest at 'http://192.168.213.19:8089/ws/info?t=1652340463496' from origin 'http://localhost:8089' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

We are using SSR and build our own server based around webpack-dev-middleware. With the latest update we see a regular issue when loading the page:

http://localhost:3000/sockjs-node/info?t=1553005986947 404 (Not Found)

Unfortunately, the new code breaks for us using our own set-up. Do you mind adding an option to not enable the socket by default?

Hi! Thanks for the plugin. Really appreciated to have this kind of functionality widely available.

I am not exactly sure about details, but it seems like the plugin is not able to work together with webpack-serve as a dev-server alternative. It probably registers some middleware to work, but does not correctly detect the alternative dev server config. Do you have any plans for fixing this? Thanks a lot.

We have a deprecation warning log too, coming from webpack-dev-server, because of the usage of deprecated option onBeforeSetupMiddleware in the error-overlay-webpack-plugin

This code should be migrated to the latest setupMiddlewares option

/Users/hjodiawalla/Desktop/CEP/personalizationnodeweb/webpack.config.js:11
    new ErrorOverlayPlugin(),
    ^

TypeError: ErrorOverlayPlugin is not a constructor

From the source code, looks like ErrorOverlayPlugin is a class and not a function constructor.