score:-2
upgrading react-scripts from v4 to "react-scripts": "^5.0.0", seem helped me
score:0
upgrading from react-scripts 4.0.3 to 5.0.0 worked for me.
i ended up with the following error (relevant if you're using craco):
typeerror: match.loader.options.plugins is not a function
this was solved by @weiwei in their answer here
score:0
facing the same issue today (14th feb 22) using docker containers for a reactjs app and i solved it downgrading the react-scripts version to 4.0.3 and also installing react-error-overlay on version 6.0.9. so the steps were:
- remove the package-lock.json file
- into the package.json file
- replace the dependency "react-scripts": "4.0.3"
- add react-error-overlay into the dev dependencies with "react-error-overlay": "6.0.9"
- update npm: npm update
i hope it helps anybody to save some time, cheers.
score:1
if you are using npm > v8.3 you can use overrides
like so in your package.json
.
"overrides": {
"react-error-overlay": "6.0.9"
},
for more information about overrides, go here.
the issue is a breaking change in 6.0.10
, some dependencies like react-dev-utils
will install this version even if you pin the version of react-error-overlay
to 6.0.9
that is why it is necessary to use overrides.
score:1
for these who are using create-react-app with customize-cra you can use the method 2 solution from @smac89 with addwebpackplugin, this works for me.
react-scripts: 5.0.0 webpack: 5.64.4
// config-overrides.js
const webpack = require('webpack');
const { override, addwebpackplugin } = require('customize-cra');
module.exports = override(
addwebpackplugin(
new webpack.defineplugin({
process: { env: {} },
})
)
);
this solution throws a warning on npm start but the application compiles right.
warning in defineplugin
conflicting values for 'process.env'
this warning didn't brake anything but if anyone knows how to fix it please answer this thread :)
score:1
in yarn.lock or package-lock.json file to find string
"react-error-overlay@npm:^6.0.9":
version: 6.0.10 <-- here problem
etc...
and replace to
react-error-overlay@^6.0.9:
version "6.0.9"
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
integrity sha512-nqttcuu+atdbrsd1bzhr5kgsd4of8ofjxun8uaal8rwpbacgbnpf/yauvvdx17n8xnzrdmrz9xckzhcjpw+9ew==
saved file and run yarn install
score:1
for those still having issues with this: if using webpack, run npm install -d dotenv-webpack
and if using typescript npm install -d @types/dotenv-webpack
.
then in your webpack config, add import dotenv from "dotenv-webpack";
and
...
plugins: [
...
new dotenv(),
],
...
see https://github.com/mrsteele/dotenv-webpack/blob/master/readme.md
after trying everything else, this finally worked for me.
score:3
a lot of answers suggest overriding the react-error-overlay
to 6.0.9
, but this didn't work for me (on february 11th, 2022). i was using react-scripts 5.0.0
and react-error-overlay 6.0.10
before trying out the overlay override.
instead of going through the hastle of defining the webpack configuration in my cra application (as suggested by smac89), i downgraded react-scripts
to 4.0.3
.
it works fine with react-scripts: 4.0.3
, which resolved react-error-overlay
to 6.0.10
.
so, my fix is:
- set
"react-scripts": "4.0.3"
in package.json - delete your lock file (yarn.lock or package-lock.json) and node_modules
- run install
score:9
i found the best solution.
the problem is because you lose window.process
variable when react hotloads, and process exists only on node, not the browser.
so you should inject it to browser when the app loads.
add this line to app.js
useeffect(() => {
window.process = {
...window.process,
};
}, []);
score:15
the issue was solved by updating react-scripts to 5.0.0
score:16
until a fix is final(maybe this pr), for anyone using npm(not yarn) the solution is this:
add to package.json:
"resolutions": {
"react-error-overlay": "6.0.9"
},
"scripts":{
"preinstall": "npx npm-force-resolutions",
....
},
"devdependencies":{
"react-error-overlay": "6.0.9",
...
}
and then do an
npm install
score:19
add this code in package.json
"devdependencies": {
"react-error-overlay": "6.0.9" },
after that run npm install command. it worked for me after 2 days of scrolling on the internet.
score:68
i tried updating react-scripts to 5.0.0, but that didn't work.
solution: -
- if you are using
npm
: -
npm i -d react-error-overlay@6.0.9
- if you are using
yarn
: -
yarn add -d react-error-overlay@6.0.9
score:128
upgrading to react-scripts v5 is not always the solution.
the full reason for this bug is described here. in short here is a brief summary:
the error is as a result of react-error-overlay
(which many people would never have heard of because it is a dependency of react-scripts
). this package's dependencies were update to support webpack
v5, which unfortunately is not compatible with react-scripts
v4.
method 1
if upgrading to react-scripts
v5 is not working for you, you can also try another workaround which is to pin react-error-overlay
to version 6.0.9
:
delete your yarn.lock
or package-lock.json
, then install your dependencies again.
yarn
yarn will take the resolutions field into consideration out of the box.
"resolutions": {
"//": "see https://github.com/facebook/create-react-app/issues/11773",
"react-error-overlay": "6.0.9"
}
for yarn workspaces, place the above resolution in the root package.json
, not in the problematic folder. see this issue comment.
npm (>=v8.3.0)
the equivalent of resolutions
for npm is overrides
.
"overrides": {
"react-error-overlay": "6.0.9"
},
npm (<8.3.0)
you need to make sure npm
uses the resolutions
field when you run npm install
. to automate the installation, see this answer
method 2
yet another (not so popular) workaround is to use a webpack plugin:
plugins:[
new webpack.defineplugin({
process: {env: {}}
})
]
if you use craco
, you just need to modify your craco.config.js
file to add that plugin:
{
...
webpack: {
plugins: {
add: [
new webpack.defineplugin({
process: {env: {}}
})
]
}
}
}
for customize-cra
users, see this answer or this github comment.
this last method is not popular because not many cra users ever have to touch webpack directly to work with react.
Source: stackoverflow.com
Related Query
- React Uncaught ReferenceError: process is not defined
- Uncaught ReferenceError: process is not defined error when converting react (TS) app to PWA with webpack and babel config
- React Sasy DatePicker throwing this error : Uncaught ReferenceError: process is not defined
- Uncaught ReferenceError: React is not defined
- Webpack 5 - Uncaught ReferenceError: process is not defined
- Uncaught ReferenceError: React is not defined
- Uncaught ReferenceError: regeneratorRuntime is not defined in React
- React JS Uncaught Reference Error: function not defined
- Uncaught ReferenceError: Buffer is not defined in React
- React - Uncaught ReferenceError: require is not defined
- Uncaught ReferenceError: regeneratorRuntime is not defined in react 17, webpack 5 while making api calls through actions
- React Uncaught ReferenceError: Buffer is not defined
- Error: Uncaught ReferenceError: React is not defined
- gulp + browserify + reactjs, Uncaught ReferenceError: React is not defined
- Uncaught ReferenceError: Link is not defined React
- Uncaught ReferenceError: process is not defined - React-Rails
- ReactJS Uncaught ReferenceError function is not defined
- Uncaught ReferenceError: process is not defined / Line 0: Parsing error
- Uncaught ReferenceError: controller is not defined in react js
- React fixed-data-table: Uncaught ReferenceError: Table is not defined
- Intégrating React into Symfony (Webpack Encore) : ReferenceError : React is not defined
- React js with jsx: Uncaught ReferenceError: require is not defined
- Uncaught (in promise) ReferenceError: data is not defined in react component
- React uncaught reference error: exports is not defined
- Plunker Uncaught ReferenceError: React is not defined
- Uncaught ReferenceError: require is not defined on React
- Meteor React Uncaught ReferenceError: Peer is not defined
- Why is this exception being thrown? Uncaught ReferenceError: React is not defined
- React - Rails Uncaught TypeError 'map' of data not defined
- Error on using exports in a React application - Uncaught ReferenceError: exports is not defined
More Query from same tag
- how to set the image position with JSX/HTML5?
- Clear or update redirect state
- DeviceMotionEvent Request Permission with Typescript
- Expand/Collapse all data
- React Router 4 Match returns undefined
- In Typescript, is there any way to typecheck passed-in JSX.Element's?
- MUI date picker: disable list of specific dates within a month
- Is there a way to call useEffect only once and also have access to the current state of component?
- How to display error message correctly from custom hook validation?
- How to add examples a component with dependencies in react-styleguidist
- Add production into development React Webpack config
- Writing makeStyle in Material UI
- How to assign dict value - "TypeError: Cannot read properties of undefined (reading '0')"
- How to avoid inline functions in React/Redux
- Prefilled slider value, jumps always back to default state of prefilled api data
- Laravel 5.5 render a React component in a blade view with data from the controller
- React: How can I change a component which has rendered to pass to a sibling component?
- How to make default route to login page if not authenticated react-router-dom
- Correct way to React axios post with UUID and nested object in JSON payload?
- Uncaught SyntaxError: Unexpected token in import React from 'react'
- Is there a reason people prefer using the constructor of a React component instead of componentWillMount?
- Mapping an array from props in a connected React component
- How to pass string value in onClick event listener in Javascript as we do it in onclick event listener in html
- Redux reducers aren't updating the store
- React.js Render App.js after succesful Login
- A component is changing an uncontrolled Autocomplete to be controlled
- trying to not to iterate on undefined or not available objects
- How to control when a component renders? React js for adding a comment to a post
- React-bootstrap elements does not have styling
- How to call a class component using onclick event handler in react.js