尝试使用 export * 语法时 ESLint、React/TS 出现问题

Question

是否可以在 react/typescript 中使用带有绝对导入路径和 eslint 的 export * from './X'？我想在 components 文件夹中有一个 index.ts 文件，它可以导出其他所有内容，但是当我尝试这样做时，eslint 给了我一个奇怪的错误。

我目前的结构是这样的：

src/components/Example1/Example1.tsx

import React from 'react';

export type Props = {};
export const Example1 = (props: Props) => <div></div>

src/components/Example1/index.ts

export * from './Example1';

src/components/index.ts

export * from './Example1';

index 两个文件都给了我错误： 0:0 error Parsing error: Cannot read property 'name' of undefined

此外，当我尝试使用绝对路径 import { Example1 } from 'components'; 从 components/index 文件中导入任何内容时，我遇到了错误：

1:43  error  Parse errors in imported module 'components': Cannot read property 'name' of undefined (undefined:undefined)  import/namespace
1:43  error  Parse errors in imported module 'components': Cannot read property 'name' of undefined (undefined:undefined)  import/named

这是我的.eslintrc.json 文件

  {
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "root": true,
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:import/warnings",
    "plugin:import/errors",
    "plugin:import/typescript",
    "prettier/@typescript-eslint",
    "prettier",
    "prettier/react"
  ],
  "plugins": [
    "react",
    "react-hooks",
    "jsx-a11y",
    "@typescript-eslint",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "settings": {
    "react": {
      "version": "detect"
    },
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"],
        "moduleDirectory": ["node_modules", "src/"]
      }
    }
  },
  "rules": {
    "prettier/prettier": "error",
    "import/newline-after-import": "error",
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": [
      "warn",
      { "args": "after-used", "argsIgnorePattern": "^_" }
    ]
  }
}

这是我的tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "baseUrl": "./src"
  },
  "include": ["src"]
}

我现在的package.json：

{
  "name": "frontend",
  "version": "0.0.0",
  "license": "MIT",
  "private": true,
  "dependencies": {
    "@apollo/react-hooks": "^3.1.3",
    "@material-ui/core": "^4.9.5",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/styles": "^4.9.0",
    "@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/material-ui": "^0.21.7",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "@types/react-router-dom": "^5.1.3",
    "@types/styled-components": "^5.0.1",
    "@types/yup": "^0.26.32",
    "apollo-boost": "^0.4.7",
    "env-cmd": "^10.1.0",
    "formik": "^2.1.4",
    "graphql": "^14.6.0",
    "i18next": "^19.3.3",
    "i18next-browser-languagedetector": "^4.0.2",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-i18next": "^11.3.3",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.0",
    "styled-components": "^5.0.1",
    "typescript": "~3.7.2",
    "yup": "^0.28.3"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.23.0",
    "@typescript-eslint/parser": "^2.23.0",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.10.0",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.2",
    "prettier": "^1.19.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "build:staging": "env-cmd -f .env.staging yarn build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "tsc --noEmit && eslint . --ext .js,.tsx,.ts --max-warnings=0",
    "lint:fix": "eslint . --ext .js,.tsx,.ts --fix",
    "watch": "react-scripts start",
    "deploy": "yarn build && firebase deploy",
    "deploy:staging": "yarn build:staging && firebase use staging && firebase deploy"
  },
  "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"
    ]
  }
}

我还在使用 lerna 和 yarn 工作区来轻松处理 MERN 应用程序。

删除 eslint 包/配置，node_modules 对我没有帮助，我仍然有 Cannot read property 'name' of undefined 错误。这非常奇怪，因为在干净的 CRA 中一切正常。我花了最后 4 个小时试图解决这个问题，最后使用了一种解决方法，将类型导入根索引文件并将它们重新导出为新类型，但这绝对是一个痛苦的解决方案。我需要保留隔离模块。也许有人有类似的问题？

Answer 1

问题出在@typescript-eslint 包上，查看问题了解更多信息： https://github.com/typescript-eslint/typescript-eslint/issues/1746

对此的快速解决方法是将软件包降级到版本 2.22.0：

@typescript-eslint/eslint-plugin

@typescript-eslint/parser

@Edit 这有助于解决 lint 错误，但我的 CRA 构建仍然崩溃，我想我将不得不等待包修复