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

Question

目前正在启动我客户端的服务器，上面的错误是我一直在得到。我正在使用 TypeScript、ReactJS、ESLint。由于这个错误，我似乎无法前进一直困扰着我。 GitHub page for ESLint 也没有太大帮助。

在我创建 useMutation 组件并将其导出到 index.ts 后出现此错误。不确定如何消除此错误。

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

这是来自 eslint-typescript 吗？如果是这样，请检查您的打字稿版本是否不是 dev/nightly 版本。

Answer 2

对于未来的 Google 员工：

我刚才在 Vue.js 2 项目的 TypeScript 4.0.2 上遇到了同样的问题。我通过将 @typescript-eslint/eslint-plugin 和 @typescript-eslint/parser 升级到 npm 使用 @latest 给我的最新版本来修复它，当时分别是 3.3.0 和 3.10.1。

Answer 3

尝试在接口中使用变量类型。例如，当我有这样的状态接口时，我遇到了这个错误：

interface State{
    foo: []
}

但是当我更改数组类型时它起作用了：

interface State{
    foo: string[]
}

Answer 4

这对我的 CRA 项目很有效。

第 1 步：编辑 package.json 并将 typescript 版本设置为 ^3.9.7

第 2 步：删除 node_modules

中的 .cache 文件夹

第 3 步：运行npm install

Answer 5

编辑： 如 Meng-Yuan Huang 所述，此问题不再出现在 react-scripts@^4.0.1

发生此错误是因为 react-scripts 直接依赖于 @typescript-eslint/parser 和 @typescript-eslint/eslint-plugin 的 2.xx 范围。

您可以通过向 package.json 添加解决方案字段来解决此问题，如下所示：

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

NPM 用户： 将上面的解决方案字段添加到您的 package.json 但使用 npx npm-force-resolutions 更新 package-lock.json 中的包版本。

Yarn 用户：您不需要做任何其他事情。有关详细信息，请参阅 selective dependency resolutions。

注意：如果您使用的是 monorepo/Yarn 工作区，则 resolutions 字段必须位于 top-level package.json.

中

注意：yarn add 和 yarn upgrade-interactive 不遵守 resolutions 字段，因此它们会生成版本不正确的 yarn.lock 文件。小心。

Answer 6

我遇到了同样的错误，但我的解决方法是我有一种类型

text : string[] | []

并将其更改为

text : string[]

对我有用

Answer 7

有时这个错误是由于其他人所说的无效类型造成的

我在使用裸数组作为类型时遇到此错误

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

我在错误输入多维数组时也遇到了这个错误：

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

const someVariable : string[][] //Correct

来自 typescript 的错误消息非常神秘，希望这对您有所帮助。

Answer 8

您的 TypeScript 版本与您的 eslint 不兼容。将这两个依赖升级到最新版本即可修复。

TypeScript 4.0.5 兼容版本 4.6.0

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

TypeScript 4.1.5 兼容版本 4.18.0

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

TypeScript 4.2.4 兼容版本 4.23.0

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

TypeScript 4.3.2 兼容版本 4.25.0

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

TypeScript 4.5.5 兼容版本 5.10.2

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

TypeScript 4.6.2 兼容版本 5.15.0

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

TypeScript 4.7.2 兼容版本 5.26.0

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

Answer 9

Yarn 用户，我在 react 中遇到了同样的问题，我通过删除 package-lock.json 文件并重新安装解决了这个问题：

rm -rf node_modules
yarn cache clean
yarn install

我用 vscode 关闭了 linux 终端，以免缓存出现问题。

Answer 10

必须手动添加依赖项，即使它发出不兼容警告，因为 npm-force-resolutions 解决方案对我不起作用。

首先，我必须将以下依赖项添加到 package.json（dependencies 因为我使用的是 create-react-app，我从未见过使用 devDependencies） :

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

然后，我 rm -rf node_modules/ 这样我就可以干净地安装 npm 东西了。
接下来，安装所有内容：npm install.
检查您的版本是否正确：npm ls @typescript-eslint/eslint-plugin。它说 UNMET PEER DEPENDENCY 但我不得不忽略它，否则我将无法正常工作。
npm start 以确保 create-react-app 现在可以正常工作。

我建议先使用 npm-force-resolutions 解决方案，但如果失败，请尝试这个。

哦，还有一个额外的注意事项：

这整个灾难是因为我做了这样的事情：

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

如果我删除该注释行，代码将毫无问题地编译。我保持这种方式是因为我已经让我的代码像那样工作，但是如果你只是避免在界面中有一个元组（不管它是否有 labels 都没有关系），你可以潜在地避免所有这么麻烦。

Answer 11

此外，除了 array types 上面描述我回答的问题外，还有很多 tuple 个案例导致了这个问题。让我提一下它们

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]>
}

另一种情况：

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])

所以检查你的元组操作两次

Answer 12

致所有使用 create-react-app 和 typescript 的人。

当你遇到这样的错误时

升级打字稿

和

升级反应脚本包

Answer 13

您可以在 package.json 中按如下方式解决此问题：

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

我的打字稿版本是：“打字稿”：“^4.1.5”

Answer 14

如果您有动态类型的函数参数和 Typescript v4 及更高版本，则可能会发生此错误。我有

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

在我使用 TS 版本 <= 4.0.0 之前从未抛出此错误。此外，传播参数对我来说是一个过度工程，用精确的逗号分隔函数参数替换它解决了上述问题。

Answer 15

在我的例子中，我不得不在 package.json.

的“解决方案”中添加两个依赖项

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

我正在使用 Typescript 4.1.0

Answer 16

我发现了这个问题，我通过更改文件中的值类型解决了这个问题

在我的例子中我被声明为

let data: [] = [];

并且我所有的文件都是错误显示解析错误：当我更改为

时无法读取未定义的属性 'map'

let data: any = [];

这是工作，错误已解决。

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

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

typescript

reactjs

eslint

create-react-app

react-hooks