gregberge / error-overlay-webpack-plugin Goto Github PK
View Code? Open in Web Editor NEWCatch errors with style ๐ฅโจ
License: MIT License
Catch errors with style ๐ฅโจ
License: MIT License
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?
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.
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.
react-dev-utils
< 12 depends on a vulnerable version of immer
. 12.0.0 fixed this issue. This is a major version upgrade though.
/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.
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?
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
?
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?
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,
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
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",
}),
],
};
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'
};
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
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!
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-formentry
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 hey!
Great module!
Will there be any API for adding custom themes?
Currently, the plugin is using the sockjs-client
for devServer which was default in webpack-dev-server@3
.
error-overlay-webpack-plugin/src/entries/devserver.mjs
Lines 13 to 19 in 8aa4edf
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'
I need to show errors on display, but i want to use laravel mix, can your extension show errors with laravel mix?
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?
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:
src
to TypeScript.d.ts
filesIn Mac OS system, the vscode editor cannot be opened by browser error, and there is no prompt
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 }
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.
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'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? ๐
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!
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;
}
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.
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 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
error-overlay-webpack-plugin/src/index.js
Line 40 in 8aa4edf
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
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?
Total app is reloading after error thrown from the plugin why
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:
error-overlay-webpack-plugin/src/index.js
Line 27 in 6e62765
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
.
If webpack configuration is written in typescript, then there is an error on the absent type definitions.
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?
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.
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;
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",
],
},
],
},
};
I get an error when using webpack 5 with this plugin.
The chrome error console says:
Error: Iframe has not been created yet.
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
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.
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.
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.
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.