React: Can't import .tsx file

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

you're going to need to provide a few more details. how are you building your app? are you using a starter kit? — imjared
I'm using create-react-app. I did 'npx create-react-app (name) --typescript' — ZeroSevenTen

Idin Khayami Idin Khayami · Accepted Answer · 2020-04-14T22:33:24

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']
      }
    }
  }
};

React: Can't import .tsx file

1 Answers