ReactJS: Converting index.js to index.tsx - Module not found: Error: Can't resolve './App'

Question

I'm trying to add some pages in typescript, and since I can only import.ts files in.ts or.tsx files, I renamed "Index.js" to "Index.tsx" and "App.js" to "App.tsx".

Now I'm getting the following error:

ERROR in ./src/index.tsx 7:0-24
Module not found: Error: Can't resolve './App'

Index.tsx

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

App.tsx

function App() {
  return (
    <Provider store={store}>
      <div>hi</div>
    </Provider>
  );
}

export default App;

Why can't Index.tsx resolve App.tsx? I created the project with create-react-app and I'm using React 17.0.2.

Answer 1

It's seems a simple error. Check if you have imported the App.tsx correctly in index.tsx

and you have updated the imports from something like

import App from 'App.js' to import App from 'App.tsx'

If it doesn't get solved then share some more information with me.

Answer 2

That's because webpack config in CRA is not set up for typeScript.

If you wanna use typeScript in your React project, you should begin with "CRA typescript template"!

install CRA typeScript template and then make code in there.

the template npm site is here https://www.npmjs.com/package/cra-template-typescript

I hope you find an answer:D

Answer 3

If you want to use js files in your typescript project and this code

    "compilerOptions": {
   
    "allowJs": true,
    
  },

to your tsconfig.json config file. If you don't have the file run $ tsc --init to generate it.

Answer 4

1: Create file tsconfig.json in the src directory.

paste this code.

{ "compilerOptions": {

"target": "ES6",

"lib": [
  "dom",
  "dom.iterable",
  "esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"

}, "include": [ "src" ] }

2: install npm I cra-template-typescript

3: import App from './App.tsx'; instead of import App from './App';****