CODEWITHSUNDEEP
eslintcreate-react-appreact-scripts
DiegoTArg
DiegoTArg

Reputation: 487

Failed to update react-scripts

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:

[email protected] /Users/diego/myapp/client
└─┬ [email protected]
  ├─┬ @typescript-eslint/[email protected]
  │ └── @typescript-eslint/[email protected] deduped
  ├── @typescript-eslint/[email protected]
  └─┬ [email protected]
    ├── @typescript-eslint/[email protected] deduped
    └── @typescript-eslint/[email protected] 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.

Upvotes: 1

Views: 1579

Answers (1)

Akasha
Akasha

Reputation: 1077

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:

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

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

  2. Run npm install.

  3. Run npm install [email protected].

Upvotes: 1

Related Questions