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

Question

目前在我的客户端启动服务器，上面的错误是我得到的。我正在使用 Typescript、React、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];
};

Answer 1

编辑：正如 Meng-Yuan Huang 所指出的，这个问题不再发生在react-scripts@^4.0.1

出现此错误的原因react-scripts对的2.xx的范围内的直接依赖@typescript-eslint/parser和@typescript-eslint/eslint-plugin。

您可以通过向您添加分辨率字段来解决此问题，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 用户：你不需要做任何其他事情。有关更多信息，请参阅选择性依赖项解决方案。

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

注意：yarn add并且yarn upgrade-interactive不尊重该resolutions字段，因此他们可能会生成yarn.lock版本不正确的文件。小心。

Answer 2

对于未来的 Google 员工：

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

Answer 3

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

interface State{
    foo: []
}

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

interface State{
    foo: string[]
}

Answer 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",
}

Answer 5

这对我的 CRA 项目有效。

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

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

第 3 步：运行 npm install

Answer 6

这是来自 eslint-typescript 吗？如果是这样，请检查您的打字稿版本是否不是开发/夜间构建。

Answer 7

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

使用裸数组作为类型时出现此错误

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

错误地输入多维数组时，我也收到此错误：

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

const someVariable : string[][] //Correct

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

Answer 8

我有同样的错误，但对我来说修复是我有一种类型

text : string[] | []

并将其更改为

text : string[]

为我工作

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

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