反应：无法导入 .tsx 文件

Question

New to using TypeScript with React. When I import a component that is from a.tsx file, it assumes it is a.js file by default. The error says that there is no About.js file or Contact.js file in that directory. Additionally, the TS linter won't let me add.tsx to the end of the file path. How to fix this? I used 'npx create-react-app project_name --typescript'. Here is my code

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

Answer 1

Did you use create react app? In case you didn't use or used and eject it you should add this config to your webpack config file:

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

In case that you used create react app and didn't eject it you can add these rules to your typescript-eslint

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

Answer 2

I had the same problem, I used the default create app of react (that create a JS project by default).

1. A temporary solution I used was to add the tsx extension to the import, it compiles and the site works but appears like a compilation error in the IDE
2. The permanent solution was to create a new react app using the typescript template like so:

npx create-react-app --template typescript

Answer 3

npm install --save-dev webpack-cli