javascript React：无法导入.tsx文件

ljo96ir5 于 2023-02-02 发布在 Java

关注(0)|答案(3)|浏览(475)

首次将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

JavaScript

来源：https://stackoverflow.com/questions/61218279/react-cant-import-tsx-file

3条答案

按热度按时间

2ul0zpep1#

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

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

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

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

赞(0）回复(0）举报 2023-02-02

smdnsysy2#

我遇到了同样的问题，我使用了react的默认create应用程序（默认情况下创建一个JS项目）。
1.我使用的一个临时解决方案是将tsx扩展添加到导入中，它将编译并且站点将正常工作，但在IDE中显示为编译错误
1.永久性的解决方案是使用 typescript 模板创建一个新的React应用，如下所示：
npx创建-React-应用程序--模板类型脚本

赞(0）回复(0）举报 2023-02-02

kknvjkwl3#