如何摆脱我的“@types/react/index”只能使用 React/TypeScript 中的 'esModuleInterop' 标志 lint 进行默认导入答案

【问题标题】：How can I get rid of my "@types/react/index" can only be default-imported using 'esModuleInterp' flag lint in React/TypeScript如何摆脱我的“@types/react/index”只能使用 React/TypeScript 中的 'esModuleInterop' 标志 lint 进行默认导入
【发布时间】：2020-06-18 10:03:55
【问题描述】：

就像上面所说的那样简单：React 16.9.22 和 TypeScript 3.8.2。它不会影响任何东西，只会挤满我的警告窗口，形成真正有用的东西。

在我的 tsconfig 中，我有：

{
  "compilerOptions": {    
    "esModuleInterop": true
  }
}

但是每个文件都有import React from 'react';这一行

我收到 linting 错误：

.../node_modules/@types/react/index"' 只能默认导入使用“esModuleInterop”标志

可能相关的部门：

  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.22.0",
    "@typescript-eslint/parser": "^2.22.0",
    "cross-env": "^5.2.0",
    "eslint": "^6.6.0",
    "eslint-config-react-app": "^4.0.1",
    "eslint-plugin-flowtype": "^2.0.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.18.3",
    "typescript": "^3.8.2"
  },

【问题讨论】：

您是否尝试过github.com/DefinitelyTyped/DefinitelyTyped/issues/33097 中的建议更改为import * as React from 'react'？
你是最棒的！
对于那些仍然遇到这种情况的人：确保您的包含列表中有 **/*.tsx 文件。我只包含了导致上述错误的**/*.ts。

标签： reactjs typescript eslint

【解决方案1】：

对我有用的是在 compilerOptions 的 tsconfig.json 文件中添加以下内容：

"allowSyntheticDefaultImports": true,
"esModuleInterop": true

【讨论】：