Failed to update react-scripts - eslint

Question

I have a react application that was created with create-react-app and is using react-scripts version 3.4.2. The app works great but when I run eslint against it I get many invalid no-unused-vars errors. By invalid I mean that when I go to the file that variable is actually being used.
Based on this answer it seems the issue is related to #typescript-eslint/parser and #typescript-eslint/eslint-plugin. So I went ahead and executed npm list #typescript-eslint/parser #typescript-eslint/eslint-plugin on my app and this is what I get:
myapp#0.1.0 /Users/diego/myapp/client
└─┬ react-scripts#3.4.2
├─┬ #typescript-eslint/eslint-plugin#2.34.0
│ └── #typescript-eslint/parser#2.34.0 deduped
├── #typescript-eslint/parser#2.34.0
└─┬ eslint-config-react-app#5.2.1
├── #typescript-eslint/eslint-plugin#2.34.0 deduped
└── #typescript-eslint/parser#2.34.0 deduped
As seen all occurrences of the two potentially conflictive libraries are included by react-scripts app and that is why I am trying to update it.
I tried updating to 4.0.3 and when I do that eslint starts to work fine (those incorrect no-unused-vars are gone) but my app is unresponsive (I click on different buttons and/or links and nothing happen). The only error I see in the console after the update is this one:
Uncaught ReferenceError: process is not defined
at Object.4043 (<anonymous>:2:13168)
at r (<anonymous>:2:306599)
at Object.8048 (<anonymous>:2:9496)
at r (<anonymous>:2:306599)
at Object.8641 (<anonymous>:2:1379)
I was searching this error and I found this question. The error is the same maybe not what the developer describes but reading through the answers I see many of them point to react-scripts as the root cause and that maches my scenario.
I tried some of the solutions in that question, in particular method 1 from this answer (I did not try method 2 because I am not sure if adding craco is what I want) and the solution from this other answer too but they do not work.
I also tried updating to react-scripts version 5 but I get A LOT of errors.
Is someone facing this issue or at least has some clue that could help me?
Thanks in advance.

Answer 1

The error message that you shared seems to be related to a bug with react-error-overlay.
react-scripts 4.0.3. uses react-error-overlay 6.0.9. However, 6.0.10 is marked as a patch, so npm uses 6.0.10 instead of 6.0.9, but 6.0.10 is not compatible with 6.0.9.
On the other hand, react-scripts 5 does not use react-error-overlay, but might be causing breaking changes with your other packages, hence the other errors.
You can find more information about the react-error-overlay bug in these issues on the CRA repository:
Hot Reload Fails, DOM adds an additional iframe containing entire
contents of the html DOM element #11880
Is this the bug of react-error-overlay? #11773
v5 Regression react-error-overlay build - Uncaught ReferenceError:
process is not defined #11771
Here's a possible solution with react-scripts 4.0.3.:
In your project's package.json file:
In dependencies, ​set the react-scripts version to 4.0.3.
Under dependencies, in resolutions, add react-error-overlay 6.0.9.
In devDependencies, add react-error-overlay 6.0.9.
"dependencies": {
...
​ "react-scripts": "4.0.3",
...
},
"resolutions": {
​"react-error-overlay": "6.0.9"
},
...
"devDependencies": {
...
"react-error-overlay": "6.0.9",
...
}
Delete your project's node_modules folder and package-lock.json file.
Run npm install.
Run npm install react-error-overlay#6.0.9.