Failed to update react-scripts

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

1. 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",
  ...
}

2. Delete your project's node_modules folder and package-lock.json file.

3. Run npm install.

4. Run npm install react-error-overlay@6.0.9.