Module not found: Error: Can't resolve the typescript file when adding typescript to a CRA app

Question

I'm trying to add typescript to my project and write new components with typescript. I followed the documentation but I'm got this error:
can't resolve [the typescript file]

this happens even with a fresh create-react-app project.
according to CRA documentation for adding typescript To an existing Create React App project, first, we must install typescript and type definition files:

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

almost done!
rename a js/jsx file to tsx and restart your development server!

for simplicity, I'm creating a typescript file named test.tsx that contains the Test component:

export default function Test(){
    return (
        <div>this is test to see typescirpt</div>
    )
}

and importing it to the main.js and rendering it:

import Test from "./test";

function App() {
  return (
    <div className="App">
      <Test />
    </div>
  );
}

export default App;

now I'm restarting the development server (I closed the previous one with CRTL+c) with npm start.
I got this error:

Compiled with problems:

ERROR in ./src/App.js 4:0-26

Module not found: Error: Can't resolve './test' in '/home/g/w/ts/test_adding_ts/src'

I used a fresh create-react-app project, followed the documentation, and saw this error. (why?)
this is my installed dependencies:

  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.0.1",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.4.1",
    "@types/node": "^17.0.24",
    "@types/react": "^18.0.5",
    "@types/react-dom": "^18.0.1",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.6.3",
    "web-vitals": "^2.1.4"
  },

Answer 1

Have you created a config file: tsconfig.json in your root directory? I didn't see this being mentioned in the question.

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "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"
  ]
}

If not created, you can create one in root directory alongside package.json and paste the above configs. OR else already created, you can replace the existing config by above config and recheck.

Answer 2

CRA Documentation guide works if follow each step as is but it's very tricky when saying "rename any file to be a TypeScript file". According to source code of create-react-app to use typescript your app should contain ./tsconfig.json file.

Simple renaming, as described in guide, works only for ./src/index.(js|ts|jsx|tsx) file but all imports will fail as far as create-react-app configurates webpack to exclude all typescript files.

Minimal ./tsconfig.json file, as I personally checked for CRA version 5.0.1 is a following one:

{
  "compilerOptions": {
    "esModuleInterop": true,
    "jsx": "react"
  }
}