12

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
ZeroSevenTen
  • 1,122
  • 2
  • 9
  • 20

3 Answers3

7

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']
      }
    }
  }
};
Idin Khayami
  • 232
  • 1
  • 8
  • Did you use create react app or any seed project to bring up your application? – Idin Khayami Apr 14 '20 at 22:36
  • Yeah I used create react app. I found the extension place he was talking about and added .ts & .tsx so now it's working. thanks – ZeroSevenTen Apr 14 '20 at 22:39
  • Yeah I used create react app. I found the extension place he was talking about and added .ts & .tsx so now it's working. thanks – ZeroSevenTen Apr 14 '20 at 22:39
  • 2
    I used create-react-app app-name --template typescript to create the app and there is no webpack.config.js in the directory. when I import tsx file it identifies as ts file and compile error says there is no particular ts file. any suggestion that would help me? thanks – EDPChinthana Oct 12 '20 at 18:28
  • 2
    What's `typescript-eslint`? – Mikhail Batcer Jun 07 '21 at 10:11
  • I have "include": [ "next-env.d.ts", "**/*.ts", "**/*.tsx", "pages/_document.js" ] in tsconfig.json and still getting the error – Dipanshu Mahla Jun 11 '21 at 17:59
  • can you please add details on how did you resolve this problems? I can't find where to add the rules nor the config. Would be nice for @IdinKhayami also to specify if the previous answers is the one that helped you to fix the problem. – Carlos Gregorio Jan 31 '23 at 03:55
0

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

Orit
  • 314
  • 2
  • 6
-1
npm install --save-dev webpack-cli
benson23
  • 16,369
  • 9
  • 19
  • 38
mukara
  • 9
  • 3