Why is react-scripts having a compile error for optional chaining?

Question

I've upgraded typescript to at least 3.7 which is when optional chaining came about. react-scripts is also up to date. Yet the following line keeps throwing up the following error when I run npm run build:

> react-scripts build

Creating an optimized production build...
Failed to compile.

./src/myfile.tsx
  Line 172:25:  Parsing error: Expression expected

Here is the "offending" line:

   const result = item.get(first)?.get(second);

Here is my package.json:

{

  project details...

  "dependencies": {

    other dependencies here...

    "react-scripts": "^3.4.3",
    "@typescript-eslint/parser": "^2.5.0",
    "cross-env": "6.0.3",
    "typescript": "^3.7.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "cross-env CI=true react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Here is my tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": "src",
    "target": "es2020",
    "allowJs": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "lib": ["es2020", "dom"],
    "skipLibCheck": false
  },
  "include": ["src"]
}

I don't have any squiggly lines in my IDE (VS Code), so at least that is reading it correctly.

How can I get optional chaining to play nicely here? Does react-scripts ignore my tsconfig.json and/or typescript in my package.json?

Answer 1

The error hints at what the problem was: Parsing error

Although react-scripts and typescript was set to the correct versions, the eslint package needed updating. Running npm i eslint@^6.6 fixed the issue.