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

【问题标题】：Line 0: Parsing error: Cannot read property 'map' of undefined第 0 行：解析错误：无法读取未定义的属性“地图”
【发布时间】：2020-09-16 15:22:21
【问题描述】：

目前在我的客户端启动服务器，上面的错误是我一直的得到。我正在使用 Typescript、React、ESlint。由于这个错误，我似乎无法继续前进一直困扰着我。 Eslint 的 github 页面也没有太大帮助。

在我创建了 useMutation 组件并将其导出到索引.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];
};

【问题讨论】：

github.com/Jonathanh7/tinyhouse_v1，这是我的 github 存储库的链接，因此您可以看到我在您的编辑器上遇到的错误。
类似问题：stackoverflow.com/questions/63825685/…

标签： reactjs typescript react-hooks eslint

【解决方案1】：

编辑：正如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 字段必须位于顶级 package.json。

注意：yarn add 和 yarn upgrade-interactive 不尊重 resolutions 字段，因此它们会生成带有错误版本的 yarn.lock 文件。小心。

【讨论】：

另见github.com/typescript-eslint/typescript-eslint/issues/…
谢谢！我还遇到了我返回的元组类型[string, string] 给出了错误Cannot read property 'map' of undefined 的问题。这个无益的信息让我发疯，直到我发现这个。
感谢您的信息。但是，我通过将 react-scripts 从 3.4.4 更新到 4.0.1 来解决这个问题。

【解决方案2】：

对于未来的 Google 员工：

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

【讨论】：

尽管如果您使用的是未弹出的 Create React App 引导项目，这将不起作用。
尚未检查，但您应该可以通过 package.json classic.yarnpkg.com/en/docs/selective-version-resolutions 中的 resolutions 字段强制单个版本
您好@JohannesKlauß 谢谢您的回复！我终于将我的 typescript 版本更改为 3.9.5 并且错误停止了。
您也可以在此处订阅此问题以跟踪进度：github.com/facebook/create-react-app/issues/9515
@JohannesKlauß 感谢您的提示，看来纱线解决方案也不公平。即使将@typescript-eslint/eslint-plugin and @typescript-eslint/parser 指定为4.0.1，它仍然会抛出错误。正如其他人所说，必须恢复到 3.9.7 并删除 .cache 文件夹。

【解决方案3】：

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

interface State{
    foo: []
}

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

interface State{
    foo: string[]
}

【讨论】：

这修复了这个错误，因为[] 被解析为元组类型，而string[] 被解析为数组类型。在 TS 4.0 中，在 AST 中的元组类型节点上重命名了一个属性，这打破了这一点。因此，解决该错误的一种可能的快速方法是尽可能避免元组类型...
@DavidSherret 的评论和这个答案对我有用。更新 eslint-plugin 和 parser 没有影响。但是，修改类型定义可以解决问题。
非常有用，这解决了我的问题！
还将 [number, number] 替换为 number[] 以及其他类型可以修复剩余的错误。
非常有帮助，我有类似的问题，我声明了一个数组但没有指定类型。

【解决方案4】：

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

【讨论】：

拯救我的一天！这一定是公认的答案！
我找不到描述要使用的正确版本的资源。如果您有，最好添加链接。
@Harald 的第二条评论 - 我很想知道你是如何得出这份名单的！
我更新了我的依赖项，当我看到它工作时，我更新了这个答案

【解决方案5】：

这对我的 CRA 项目有效。

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

第二步：删除node_modules中的.cache文件夹

第三步：运行npm install

【讨论】：

删除 .cache 文件夹后修复
这有帮助，但我也遇到了 Babel 的问题，所以删除整个 node_modules 目录解决了这两个问题。
我还必须删除整个 node_modules 目录才能正常工作

【解决方案6】：

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

【讨论】：

对我来说，这是通过将 typescript 降级到 node_modules 和锁定文件来解决的。带有 create-react-app 的东西似乎不支持 ts 4。
不确定这是否是所有情况的正确答案。无论 tslint 或 Typescript 的版本，问题都是错误的类型。检查：myValue: [][] 与 myValue: string[][]。检查下面的答案。

【解决方案7】：

有时此错误是其他人所说的无效类型的结果

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

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

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

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

const someVariable : string[][] //Correct

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

【讨论】：

【解决方案8】：

我遇到了同样的错误，但对我来说，解决方法是我有一个类型为

text : string[] | []

并将其更改为

text : string[]

为我工作

【讨论】：

【解决方案9】：

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

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

【讨论】：

【解决方案10】：

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

当你遇到这样的错误时

升级打字稿

和

升级 react-script 包

【讨论】：

【解决方案11】：

必须手动添加依赖项，即使它给出了不兼容的警告，因为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），你可以避免所有这些麻烦.

【讨论】：

不用避免使用元组，写someTuple: [v1: string, v2: string]就行了

【解决方案12】：

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

rm -rf node_modules
yarn cache clean
yarn install

我用 linux 终端关闭了 vscode，缓存没有问题。

【讨论】：

如果你删除package.json，yarn install 将不会做任何事情。

【解决方案13】：

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

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

在我使用 TS 版本

【讨论】：

【解决方案14】：

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

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

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

【讨论】：

【解决方案15】：

就我而言，我必须在 package.json 中的“解决方案”中添加两个依赖项。

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

我正在使用 Typescript 4.1.0

【讨论】：

【解决方案16】：

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

就我而言我被宣布为

let data: [] = [];

我的所有文件都是错误显示解析错误：当我更改为时无法读取未定义的属性“地图”

let data: any = [];

这是工作，错误已解决。

【讨论】：