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.
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
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.
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.