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

IT技术 reactjs typescript react-hooks eslint
2021-04-15 12:22:30

目前在我的客户端启动服务器,上面的错误是我得到的。我正在使用 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];
};
6个回答

编辑:正如 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版本不正确文件。小心。

感谢你的信息。但是,我通过将 react-scripts 从 3.4.4 更新到 4.0.1 来解决这个问题。
2021-06-02 12:22:30
谢谢!我也遇到了我返回的元组类型[string, string]给出错误的问题Cannot read property 'map' of undefined这个无益的消息让我发疯,直到我发现了这个。
2021-06-09 12:22:30

对于未来的 Google 员工:

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

再次嗨@JohannesKlauß 感谢您的回复!我终于将typescript版本更改为 3.9.5 并且错误停止了。
2021-05-25 12:22:30
尽管如果您使用的是未弹出的 Create React App 引导项目,这将不起作用。
2021-05-26 12:22:30
您也可以在此处订阅此问题以跟踪进度:github.com/facebook/create-react-app/issues/9515
2021-05-26 12:22:30
尚未检查,但您应该能够通过resolutionspackage.json classic.yarnpkg.com/en/docs/selective-version-resolutions 中字段强制使用单个版本
2021-05-31 12:22:30
@JohannesKlauß 感谢您的提示,似乎纱线分辨率也没有任何意义。即使指定@typescript-eslint/eslint-plugin and @typescript-eslint/parser为 to ,它仍然会抛出错误4.0.1不得不恢复到 3.9.7 并像其他人所说的那样删除 .cache 文件夹。
2021-06-06 12:22:30

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

interface State{
    foo: []
}

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

interface State{
    foo: string[]
}
非常有帮助,我遇到了类似的问题,我在未指定类型的情况下声明了一个数组。
2021-05-22 12:22:30
这修复了错误,因为它[]被解析为元组类型,而string[]解析为数组类型。在 TS 4.0 中,AST 中元组类型节点上的一个属性被重命名,打破了这一点。因此,解决错误的一种可能的快速方法是尽可能避免元组类型......
2021-05-24 12:22:30
@DavidSherret 的评论和这个答案对我有用。更新eslint-pluginparser没有影响。但是,重新修改类型定义解决了这个问题。
2021-05-25 12:22:30
还用 number[] 替换 [number, number] 以及其他类型修复了剩余的错误。
2021-06-03 12:22:30
非常有用,这解决了我的问题!
2021-06-14 12:22:30

您的 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 的评论——我很想知道你是如何得出这个列表的!
2021-06-07 12:22:30
我找不到描述要使用的正确版本的资源。如果您有,最好添加链接。
2021-06-08 12:22:30
我更新了我的依赖项,当我看到它工作时,我更新了这个答案
2021-06-10 12:22:30
拯救我的一天!这必须是公认的答案!
2021-06-20 12:22:30

这对我的 CRA 项目有效。

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

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

第 3 步:运行 npm install

我还必须删除整个node_modules目录才能正常工作
2021-05-23 12:22:30
它在删除 .cache 文件夹后修复
2021-05-26 12:22:30
这有帮助,但我也遇到了 Babel 的问题,所以删除整个node_modules目录解决了这两个问题。
2021-06-15 12:22:30