Inexplicable Parsing error: Unexpected token, expected ","

Question

I'm getting this obscure error, I suspect there is some incompatibility between deps.

  Line 11:85:  Parsing error: Unexpected token, expected ","

> 11 | const tracker = new LoggerTracker({ analyticsId: process.env.REACT_APP_ANALYTICS_ID as string});
     |                                                                                     ^

npm list

├── @commitlint/cli@11.0.0
├── @commitlint/config-conventional@11.0.0
├── @pact-foundation/pact-node@10.2.4
├── @pact-foundation/pact@9.5.1
├── @testing-library/jest-dom@5.16.5
├── @testing-library/react-hooks@2.0.3
├── @testing-library/react@9.5.0
├── @types/classnames@2.3.1
├── @types/jest@24.9.1
├── @types/node@12.20.55
├── @types/react-dom@16.9.17
├── @types/react-redux@7.1.24
├── @types/react-router-dom@5.3.3
├── @types/react@16.14.34
├── @types/webpack-env@1.18.0
├── @typescript-eslint/eslint-plugin@2.34.0
├── @typescript-eslint/parser@2.34.0
├── @zonedigital/browserslist-config@4.3.0
├── abortcontroller-polyfill@1.7.5
├── antd@3.26.20
├── classnames@2.3.2
├── commitizen@4.2.5
├── commitlint@11.0.0
├── cz-conventional-changelog@3.3.0
├── date-fns@2.29.3
├── eslint-config-react@1.1.7
├── eslint-plugin-compat@3.13.0
├── eslint-plugin-import@2.26.0
├── eslint-plugin-react-hooks@2.5.1
├── eslint-plugin-react@7.31.11
├── fetch-mock@8.3.2
├── history@4.10.1
├── husky@3.1.0
├── jest-environment-jsdom-global@1.2.1
├── jest-environment-jsdom@24.9.0
├── jwt-decode@2.2.0
├── less@3.13.1
├── lint-staged@9.5.0
├── lodash@4.17.21
├── msal@1.4.17
├── node-sass@4.14.1
├── normalizr@3.6.2
├── npm-run-all@4.1.5
├── react-app-polyfill@1.0.6
├── react-dom@16.14.0
├── react-redux@7.2.9
├── react-router-dom@5.3.4
├── react-router-test-context@0.1.0
├── react-scripts@3.2.0
├── react-test-renderer@16.14.0
├── react@16.14.0
├── redux-mock-store@1.5.4
├── redux-thunk@2.4.2
├── redux@4.2.0
├── reselect@4.1.7
├── run-all@1.0.1
├── stylelint@10.1.0
└── typescript@3.9.10

eslint config

module.exports = {
  "extends": [
    "react",
    "plugin:import/typescript"
  ],
  "rules": {
    "arrow-body-style": 0,
    "react/prop-types": 0,
    "@typescript-eslint/no-non-null-assertion": 0,
    "@typescript-eslint/no-explicit-any": 0,
    "@typescript-eslint/explicit-member-accessibility": 0,
    "@typescript-eslint/explicit-function-return-type": 0,
    "import/no-extraneous-dependencies": [
      "error",
      {
        "devDependencies": [
          "**/*.test.{ts,tsx}",
          "./src/setupTests.ts",
          "./src/store/__mocks__/*",
          "./src/pact/*"
        ],
        "optionalDependencies": false,
        "peerDependencies": false
      }
    ],
    "camelcase": 0
  },
  "settings": {
    "polyfills": [
      "Promise",
      "fetch",
      "Object",
      "Array.from",
      "URLSearchParams",
      "AbortController",
      "Headers"
    ],
    "react": {
      "version": "detect"
    }
  },
  "env": {
    "browser": true,
    "node": true,
  }
}

Update: For documenting the whole process. Following @morganney suggestion, I've added

  "parser": "@typescript-eslint/parser",

in my eslint config. With that I get the error "Parsing error: ImportDeclaration should appear when the mode is ES6 and in the module context" which I solved by also adding parserOptions

"parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "sourceType": "module"
  },

Second update: Now I'm trying to make eslint recognise Jest to get rid of the errors like: "describe is not defined" from eslint. I've tried by adding the env:

"env": {
    "browser": true,
    "node": true,
    "jest": true
  }

and

"plugin:jest-react/recommended"

I'm not sure it is the correct way according to my dependency versions

Answer 1

Your ESLint config is missing the parser value.

"parser": "@typescript-eslint/parser"

From the docs

This is required, or else ESLint will throw errors as it tries to parse TypeScript code as if it were regular JavaScript.

You should probably add a plugin value too.

plugins: ['@typescript-eslint']