第0行：解析错误：无法读取未定义的属性“map”

Question

第0行：解析错误：无法读取未定义的属性“map”

reactjstypescriptreact-hookseslintcreate-react-app

158

目前在客户端启动服务器时，我一直收到上面的错误。我正在使用TypeScript、ReactJS和ESLint。自从这个错误困扰我以来，我似乎无法前进。即使是ESLint的GitHub页面也没什么帮助。

在创建了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];
};

- Jon Hernandez

https://github.com/Jonathanh7/tinyhouse_v1，这是我的Github存储库链接，您可以在那里查看我在您的编辑器上遇到的错误。 - Jon Hernandez

类似的问题在这里：https://dev59.com/R73pa4cB1Zd3GeqPZC1n - smac89

19个回答

93

您的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",
}

TypeScript 4.9.5 兼容版本 5.56.0

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

- Black

10

我找不到描述正确版本使用的资源。如果你有，请添加链接，这将非常好。 - Harald

3

我会更新我的依赖项，当我看到它正常工作后，我会更新这个答案。 - Black

对我来说，这并没有解决我的问题，但我知道这绝对与Typescript和eslint之间的版本冲突有关。 - Carmine Tambascia

74

给未来的谷歌搜索者:

我在一个Vue.js 2项目中使用TypeScript 4.0.2时刚刚遇到了同样的问题。我通过将@typescript-eslint/eslint-plugin和@typescript-eslint/parser升级到最新版本（使用@latest命令），解决了这个问题，目前最新版本分别是3.3.0和3.10.1。

- AverageHelper

3

如果你使用的是未弹出的Create React App引导项目，这种方法将不起作用。 - Johannes Klauß

2

还没有检查，但是你应该能够通过 package.json 中的 resolutions 字段强制使用单个版本。https://classic.yarnpkg.com/en/docs/selective-version-resolutions/ - Johannes Klauß

4

再次您好，@JohannesKlauß。感谢您的回复！我最终将我的Typescript版本更改为3.9.5，这样错误就停止了。 - mcartur

2

您也可以在此处订阅此问题以跟踪进展：https://github.com/facebook/create-react-app/issues/9515 - Johannes Klauß

5

谢谢 @JohannesKlauß 的建议，似乎 yarn 的解决方案也没有起到任何作用。即使将 @typescript-eslint/eslint-plugin 和 @typescript-eslint/parser 指定为 4.0.1，它仍然会抛出一个错误。必须回滚到 3.9.7 版本并删除 .cache 文件夹，正如其他人所说的那样。 - Jose A

显示剩余4条评论

56

尝试在接口中玩弄变量类型。例如，当我拥有这样的状态接口时，会出现以下错误：

interface State{
    foo: []
}

但是当我更改了数组的类型后，它就起作用了：

interface State{
    foo: string[]
}

- Trat Westerholt

15

这个修复了一个错误，因为 [] 被解析为元组类型，而 string[] 被解析为数组类型。在 TS 4.0 中，AST 中的元组类型节点上的一个属性被重命名，导致这种情况出现问题。因此，如果可以的话，可以尝试避免使用元组类型来快速绕过这个错误。 - David Sherret

1

@DavidSherret的评论和这个答案是对我有用的。更新eslint-plugin和parser没有任何影响。但是，重新设计类型定义解决了问题。 - tim.rohrer

非常有用，这解决了我的问题！ - M-x

同时，将[number，number]替换为number[]以及修复其他类型的错误。 - M-x

非常有用，我遇到了类似的问题，我声明了一个数组但没有指定类型。 - zak

28

以下是适用于我的CRA项目的解决方法:

步骤1：编辑package.json文件，将typescript的版本设置为^3.9.7

步骤2：删除node_modules中的.cache文件夹

步骤3：运行npm install

- sunknudsen

3

删除 .cache 文件夹后问题得到解决。 - mohammadreza berneti

1

这很有帮助，但是我在使用Babel时也遇到了问题，所以删除整个“node_modules”目录解决了这两个问题。 - manroe

为了让它起作用，我还必须删除整个node_modules目录。 - feupeu

21

有时候这个错误是由于无效的类型引起的，正如其他人所述。当我使用一个裸数组作为类型时，我也会遇到这个错误。

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

当我错误地输入一个多维数组时，我也遇到了这个错误：

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

const someVariable : string[][] //Correct

来自 TypeScript 的错误信息可能比较晦涩难懂，希望这可以帮到你。

- DLee

18

这是来自于eslint-typescript吗？如果是的话，请检查您的typescript版本是否不是dev/nightly build。

- hanh

3

对我来说，这个问题是通过将 TypeScript 降级到 <4.0、删除 node_modules 和锁定文件来解决的。似乎 create-react-app 还不支持 ts 4。 - ClownBaby

1

不确定这是否是所有情况的正确答案。无论是 tslint 还是 TypeScript 的版本，问题都在于错误的类型。请检查以下内容：myValue: [][] 与 myValue: string[][]。请查看下面的答案。 - mojmir.novak

我将这个作为答案，因为我之前使用的版本是一个夜间构建版。将它降级到一个非夜间构建版解决了我的问题。 - Jon Hernandez

15

我也遇到了同样的错误，但对我而言解决方法是我其中一种类型出现了问题。

text : string[] | []

并将其更改为

text : string[]

对我有用

- Jibin Thomas

5

除了上面提到的关于数组类型的问题之外，还有许多关于元组类型的情况也会导致这个问题。我来举几个例子。

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

因此，请仔细检查您的元组操作

- Dmitry Reutov

3

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

当你遇到以下错误时：

升级typescript

和

升级react-script包

- Caper

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Will Madden · Accepted Answer

编辑：正如黄孟远所指出的，这个问题在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文件中添加上面的resolutions字段，但使用npx npm-force-resolutions来更新package-lock.json中的软件包版本。

Yarn用户: 你不需要做其他任何事情。有关更多信息，请参见选择性依赖项分辨率。

注意：如果你在使用monorepo/Yarn工作空间，则resolutions字段必须位于顶级package.json文件中。

注意：yarn add和yarn upgrade-interactive不会尊重resolutions字段，并且它们可能会生成一个带有错误版本的yarn.lock文件。请注意。