Parsing errors when upgrading to react-scripts 4.0.1

[Eisendhal]

Describe the bug

Getting a lot of "Parsing Error: Unexpected Token" when upgrading from react-scripts 3.4.4 to 4.0.1

Did you try recovering your dependencies?

Yes

Environment

System:
OS: Windows 10 10.0.18363
CPU: (16) x64 Intel(R) Xeon(R) W-2145 CPU @ 3.70GHz
Binaries:
Node: 10.21.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.14.5 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 87.0.4280.88
Edge: Spartan (44.18362.449.0)
Internet Explorer: 11.0.18362.1
npmPackages:
react: ^17.0.1 => 17.0.1
react-dom: ^17.0.1 => 17.0.1
react-scripts: ^4.0.1 => 4.0.1
npmGlobalPackages:
create-react-app: Not Found

Context

I had an application using react 16, typescript 3 and react-scripts 3.
I upgraded all of my packages except react-scripts => everything is working fine.
Upgraded react-scripts to 4.0.1 and now I got multiple "Parsing Error: Unexpected token"

for example :

src\Model\Job.tsx
Line 100:39: Parsing error: Unexpected token, expected ","

98 |
99 | function getStartTime(span: HoursTimespan): moment.Moment {

100 | return moment().subtract(span as number, 'hours');
| ^
101 | }
102 |
103 | function getJobTimeQueryFilter(span: HoursTimespan): string {

src\components\ActiveJobs.tsx
Line 65:27: Parsing error: Unexpected token

63 | return (
64 |

65 | <MaterialTable
| ^
66 | key={getPageSize()} // HACK: To refresh when pagesize changes : https://stackoverflow.com/questions/38892672/react-why-child-component-doesnt-update-when-prop-changes
67 | title="Active Jobs"
68 | isLoading={jobReport.fetchCount === 0}

Tell me if you need more information :)

Thank you!

[perryrh0dan]

Deleting the .eslintrc.js file in the project root solved the issue for me.

[Eisendhal]

Seems to have solved the issue ! Thanks !

[IrshadSummayari]

I am facing the same issue after react-scripts update to latest version

[Beej126]

+same, no .eslintrc.js, not ejected... any help?

[Beej126]

applying fix in #9791 solved this for me - thank you @pluma!

good general technique to remember here: spin up a new CRA and compare the broken proj to see if there's anything new required in base configs like package.json... i've seen react-scripts validate tsconfig.json so it seems like they could include these kinds of checks as well??

[...] After comparing the output of a fresh yarn create react-app with my existing package.json it seems that the file now contains the following section:

  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },

This was missing in the app I upgraded. Presumably this was added to the generator output at some point in the past but inferred if missing and that logic got canned at some point in the 4.0.0 pre-releases, breaking old apps that were missing this bit.

Adding this to my package.json fixed the problem, monorepo or not.

[Haschtl]

Can confirm, that @pluma s fix in #9791 fixes this issue when upgrading from react-scripts 3.x