React typescript .tsx 文件扩展名答案

【问题标题】：React typescript .tsx files extensionsReact typescript .tsx 文件扩展名
【发布时间】：2021-03-24 20:51:31
【问题描述】：

我正在将我的 react 项目更改为 react-typescript。我已经创建了 tsconfig 和 eslintrc 并且一切都准备好了并且可以工作。我还将所有 js 文件更改为 tsx 文件。但现在我收到一个错误，它无法识别 import App from "./App"，我需要添加 .tsx "./App.tsx"。我知道我可以更改 webpack 配置文件并添加了这个：

module.exports = {
resolve: {
    enforceExtension: false,
    extensions: ['.ts', '.tsx', '.js', '.json'],
},
};

但它没有帮助，仍然得到同样的错误。如何更改配置文件以便它知道读取 .tsx 文件？我应该更改 eslintrc 吗？配置？还是网络包？谢谢

P.s 我使用了 Create React App 所以我已经有了默认的 webpack 配置

【问题讨论】：

你能试试把这个字段加到ts.config.lib.json里吗："include": ["*/.js", "*/ i>.jsx”、“*/.ts”、“*/.tsx”]
我试过了，没用
你能分享完整的 wepback 配置吗？
我使用默认的 Create React App Webpack 配置，所以没有添加额外的配置。这是我的 eslint 和 ts 配置：codesandbox.io/s/gifted-fermi-pp5fi?file=/eslintrc.js
您能否分享index 根文件以及app 文件的命名方式？我对用于这两个文件的扩展名特别感兴趣。谢谢。

标签： reactjs typescript webpack eslint typescript-eslint

【解决方案1】：

所以最终这是我的错误。如果您使用 CRA 创建一个 react 应用程序，webpack 已经知道如何处理 tsx 扩展，无需添加任何东西！只需重新编译它。顽固地从中吸取教训是一个愚蠢的错误

【讨论】：