Line 0: Parsing error: Cannot read property 'map' of undefined

Question

Currently starting up the server on my client side, the error above is what I have been getting. I am using Typescript, React, ESlint. I can\'t seem to go forward since th

Answer 1

Is this coming from eslint-typescript? If so, check that your version of typescript is not a dev/nightly build.

Answer 2

I had this same error but the fix for me was that I had one of the type as

text : string[] | []

and changing it to

text : string[]

worked for me

Answer 3

For future Googlers:

I had the same issue just now on TypeScript 4.0.2 in a Vue.js 2 project. I fixed it by upgrading @typescript-eslint/eslint-plugin and @typescript-eslint/parser to the latest that npm would give me using @latest, which at the time was 3.3.0 and 3.10.1, respectively.

Answer 4

Try playing around with variable types inside the interfaces. E. g I've got this error when I had such state interface:

interface State{
    foo: []
}

but when I've changed the type of array it worked:

interface State{
    foo: string[]
}

Answer 5

This error occurs because react-scripts has a direct dependency on the 2.xx range of @typescript-eslint/parser and @typescript-eslint/eslint-plugin.

You can fix this by adding a resolutions field to your package.json as follows:

"resolutions": {
  "**/@typescript-eslint/eslint-plugin": "^4.1.1",
  "**/@typescript-eslint/parser": "^4.1.1"
}

NPM users: add the resolutions field above to your package.json but use npx npm-force-resolutions to update package versions in package-lock.json.

Yarn users: you don't need to do anything else. See selective dependency resolutions for more info.

NOTE: if you're using a monorepo/Yarn workspaces, the resolutions field must be in the top-level package.json.

NOTE: yarn add and yarn upgrade-interactive don't respect the resolutions field and they can generate a yarn.lock file with incorrect versions as a result. Watch out.

Answer 6

Had to add the dependencies manually, even when it gave a warning of incompatibility, because the npm-force-resolutions solution did not work for me.

1. First, I had to add the following dependencies to package.json (dependencies because I'm using create-react-app, which I have never seen to use devDependencies):

"dependencies": {
  "@typescript-eslint/eslint-plugin": "^4.1.1",
  "@typescript-eslint/parser": "^4.1.1",
}

2. Then, I do rm -rf node_modules/ so I can have a clean install of npm stuff.

3. Next, install everything: npm install.

4. Check that you have the correct version: npm ls @typescript-eslint/eslint-plugin. It said UNMET PEER DEPENDENCY but I had to ignore it because otherwise I could not get this working.

5. npm start to make sure the create-react-app now works.

I'd advice going for the npm-force-resolutions solution first, but if it fails try this one.

Oh, and one extra note:

This entire disaster was because I did something like this:

interface SomeInterface {
  someBoolean: boolean,
  someList: number[],
  someTuple: [string, string]  // <-- THIS is the problem
}

If I removed that commented line, the code would compile without issues. I kept it that way because I had already made my code to work like that, but if you just avoid having a tuple inside the interface (didn't matter if it had labels or not), you can potentially avoid all this hassle.