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-appp 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 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 and 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"
  },

CodePudding user response：

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.

CodePudding user response：

Too complicated!

Moreover CRA (IMHO) is too old and creates a too complex project.

Rather than using CRA I strongly suggest to use vite.

1. open a new shell
2. issue the command npm init vite
3. follow the three step interactive menu
   • accept installing create-vite
   • select react framework
   • select react-ts variant

and the game is over!