反应：无法导入 .tsx 文件答案

【问题标题】：React: Can't import .tsx file反应：无法导入 .tsx 文件
【发布时间】：2022-03-07 20:16:00
【问题描述】：

将 TypeScript 与 React 结合使用的新手。当我从 .tsx 文件导入组件时，默认情况下它假定它是 .js 文件。该错误表明该目录中没有 About.js 文件或 Contact.js 文件。此外，TS linter 不允许我将 .tsx 添加到文件路径的末尾。如何解决这个问题？我使用了'npx create-react-app project_name --typescript'。这是我的代码

import React from 'react'
import { BrowserRouter, Route } from 'react-router-dom'
import Home from './views/Home'
import About from './views/About'
import Contact from './views/Contact'
import Navbar from './components/Navbar'
import Footer from './components/Footer'

const App: React.FC<{}> = () => {
  return (
    <BrowserRouter>
      <Navbar title="Website" links={['About', 'Contact']} color="blue"/>

      <Route exact path="/" component={Home}/>
      <Route path="/home" component={Home}/>
      <Route path="/about" component={About}/>
      <Route path="/contact" component={Contact}/>

      <Footer/>
    </BrowserRouter>
  )
}

export default App

【问题讨论】：

您需要提供更多详细信息。你是如何构建你的应用程序的？你在使用入门工具包吗？
我正在使用 create-react-app。我做了'npx create-react-app (name) --typescript'

标签： javascript reactjs typescript react-tsx

【解决方案1】：

您是否使用过创建反应应用程序？如果您没有使用或使用并弹出它，您应该将此配置添加到您的 webpack 配置文件中：

{
  resolve: {
    extensions: [".js", ".json", ".ts", ".tsx"],
  },
}

如果您使用 create react 应用程序但没有弹出它，您可以将这些规则添加到您的 typescript-eslint

module.exports = {
  settings: {
    'import/resolver': {
      'node': {
        'extensions': ['.js','.jsx','.ts','.tsx']
      }
    }
  }
};

【讨论】：

您是否使用 create react app 或任何种子项目来启动您的应用程序？
是的，我使用了创建反应应用程序。我找到了他正在谈论的扩展名并添加了 .ts 和 .tsx 所以现在它正在工作。谢谢
是的，我使用了创建反应应用程序。我找到了他正在谈论的扩展名并添加了 .ts 和 .tsx 所以现在它正在工作。谢谢
我使用 create-react-app app-name --template typescript 创建应用，目录下没有 webpack.config.js。当我导入 tsx 文件时，它标识为 ts 文件并且编译错误说没有特定的 ts 文件。有什么建议可以帮助我吗？谢谢
typescript-eslint 是什么？

【解决方案2】：

npm install --save-dev webpack-cli

【讨论】：