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

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

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