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, ReactJS, ESLint. I can't seem to go forward since this error has been haunting me. The GitHub page for ESLint hasn't been of much help either.

This error went up after I had created the useMutation component and exported it in index.ts. Not sure how to get rid of this error.

Below is my package.json

    {
    "name": "tinyhouse_client",
    "version": "0.1.0",
    "private": true,
      "dependencies": {
      "@testing-library/jest-dom": "^4.2.4",
      "@testing-library/react": "^9.3.2",
      "@testing-library/user-event": "^7.1.2",
      "@types/jest": "^24.0.0",
      "@types/node": "^12.0.0",
      "@types/react": "^16.9.35",
      "@types/react-dom": "^16.9.0",
      "@typescript-eslint/parser": "^3.0.2",
      "react": "^16.13.1",
      "react-dom": "^16.13.1",
      "react-scripts": "3.4.1",
      "typescript": "~2.23.0"
      },
      "resolutions": {
     "@typescript-eslint/eslint-plugin": "^2.23.0",
     "@typescript-eslint/parser": "^2.23.0",
     "@typescript-eslint/typescript-estree": "^2.23.0"
     },
     "scripts": {
     "start": "react-scripts start",
     " build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
     },
     "eslintConfig": {
     "extends": "react-app"
     },
     "browserslist": {
     "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
      "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
     ]
     },
     **strong text** "proxy": "http://localhost:9000"
      }

Below is my index.ts

    export * from './server';
    export * from './useQuery';
    export * from './useMutation';

And my useMutation.ts

    import { useState } from 'react';
    import { server } from './server';

    interface State<TData> {
    data: TData | null;
    loading: boolean; 
    error: boolean;
    }

    type MutationTuple<TData, TVariables> = [
    (variables?: TVariables | undefined) => Promise<void>,
    State<TData>
    ];

    export const useMutation = <TData = any, TVariables = any>(
    query: string
    ): MutationTuple<TData, TVariables> => { 
    const [state, setState] = useState<State<TData>>({
    data: null,
    loading: false,
    error: false,
    })

    const fetch = async (variables?: TVariables) => {
    try {
      setState({ data: null, loading: true, error: false });

      const { data, errors } = await server.fetch<TData, TVariables>({ query, variables });
      if (errors && errors.length) {
        throw new Error(errors[0].message);
      }

      setState({ data, loading: false, error: false });
    } catch (err) {
      setState({ data: null, loading: false, error: true });
      throw console.error(err);
    }
   }

   return [fetch, state];
};

Answer 1

Edit: as noted by Meng-Yuan Huang, this issue no longer occurs in react-scripts@^4.0.1

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 2

Your version of TypeScript is not compatible with your eslint. You can fix it by upgrading these two dependencies to the latest version.

TypeScript 4.0.5 is compatible with version 4.6.0

"devDependencies": {
  "@typescript-eslint/eslint-plugin": "^4.6.0",
  "@typescript-eslint/parser": "^4.6.0",
}

TypeScript 4.1.5 is compatible with version 4.18.0

"devDependencies": {
  "@typescript-eslint/eslint-plugin": "^4.18.0",
  "@typescript-eslint/parser": "^4.18.0",
}

TypeScript 4.2.4 is compatible with version 4.23.0

"devDependencies": {
  "@typescript-eslint/eslint-plugin": "^4.23.0",
  "@typescript-eslint/parser": "^4.23.0",
}

TypeScript 4.3.2 is compatible with version 4.25.0

"devDependencies": {
  "@typescript-eslint/eslint-plugin": "^4.25.0",
  "@typescript-eslint/parser": "^4.25.0",
}

TypeScript 4.5.5 is compatible with version 5.10.2

"devDependencies": {
  "@typescript-eslint/eslint-plugin": "^5.10.2",
  "@typescript-eslint/parser": "^5.10.2",
}

TypeScript 4.6.2 is compatible with version 5.15.0

"devDependencies": {
  "@typescript-eslint/eslint-plugin": "^5.15.0",
  "@typescript-eslint/parser": "^5.15.0",
}

TypeScript 4.7.2 is compatible with version 5.26.0

"devDependencies": {
  "@typescript-eslint/eslint-plugin": "^5.26.0",
  "@typescript-eslint/parser": "^5.26.0",
}

TypeScript 4.9.5 is compatible with version 5.56.0

"devDependencies": {
  "@typescript-eslint/eslint-plugin": "^5.56.0",
  "@typescript-eslint/parser": "^5.56.0",
}

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 is what worked for my CRA project.

Step 1: edit package.json and set typescript version to ^3.9.7

Step 2: delete .cache folder in node_modules

Step 3: run npm install

Answer 6

Sometimes this error is a result of an invalid type as others have stated

I've gotten this error when using a bare array as a type

const someVariable: [] //Incorrect
const someVariable: string[] //Correct

I also got this error when typing an multidimensional array incorrectly:

const someVariable : [string[]] //Incorrect. Results in map error

const someVariable : string[][] //Correct

The error message from typescript is pretty cryptic so hopefully this helps.

Answer 7

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

Answer 8

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 9

Also except array types problems describing im answers above, there are many tuple cases cause this problem.. Let me mention them

interface Some {
  // error
  tupleValue: [string, number]

  // works
  tupleValue: [v1: string, v2: number]

  // error
  tupleArr: [v1: string, v2: number][] 

  // works!
  tupleArr2: Array<[v1: string, v2: number]>
}

another case:

type ValueView = [value: SomeObj, view: string]

// error
const res1: ValueView[] = arr.map(v => [v, v.name])
// works !!!
const res: ValueView[] = arr.map(v => [v, v.name] as ValueView)

// error
const res = arr.map(v => [v, v.name] as [SomeObj, string])
// works !!!
const res = arr.map(v => [v, v.name] as [value: SomeObj, view: string])

So check your tuple operations twice

Answer 10

for all the guys who is using create-react-app and typescript.

when you encounting some Error like this

upgrade typescript

and

upgrade react-script package

Answer 11

In case you have dynamically typed function arguments, and Typescript v4 and up, this error may occur. I had

{
  ...
    getDataThunk: (...args: [string]) => dispatch(getData(...args))
  ...
}

This error had never been thrown till I was using TS version <= 4.0.0. Also, Having spread arguments was quite an over-engineering for me, replacing it with exact comma separated function arguments resolved the said issue.

Answer 12

Yarn users, I had the same problem in react, I solved the problem by removing the package-lock.json file and installing again:

rm -rf node_modules
yarn cache clean
yarn install

I'd made with vscode closed by linux terminal, to don't have problem with cache.

Answer 13

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.

Answer 14

I was found this problem and I solve it with change value type in the file

in my case I was declare a

let data: [] = [];

and all of my file is error show Parsing error: Cannot read property 'map' of undefined when I change to

let data: any = [];

It's was work and error was solved.

Answer 15

You can fix this in your package.json as follows:

"@typescript-eslint/eslint-plugin": "^4.18.0",
"@typescript-eslint/parser": "^4.18.0",

and my typescript version is: "typescript": "^4.1.5"

Answer 16

In my case I had to add two dependencies to "resolutions" in my package.json.

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

And I'm using Typescript 4.1.0

Answer 17

The issue I was facing was that I tried to export a type with an a property that was an interface.

After looking one by one, I found that I was using an interface inside a type. So I had to change it back to an interface and the problem was solved

Answer 18

I had a property in the react.props interface lie this

someName: [];

changing it to

someName: any[];

fixed the issue