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

Question

目前在我的客户端启动服务器，上面的错误是我得到的。我正在使用 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 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 hanh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

编辑： 正如 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 用户： 你不需要做任何其他事情。有关详细信息，请参阅 选择性依赖项解决 方案。

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

NOTE: yarn add and yarn upgrade-interactive don’t respect the resolutions field and they can generate a yarn.lock file with incorrect versions as a result.小心。

原文由 Will Madden 发布，翻译遵循 CC BY-SA 4.0 许可协议