npm start can't detect tsx file - reactjs

Question

I tried to create a react app and add typescript to it.
But when I run the app, it seems like npm start is not detecting the typescript file and not generating tsconfig.json automatically.
Here is what I did:
1. npx create-react-app my-app
2. cd my-app
3. npm install --save typescript #types/node #types/react #types/react-dom #types/jest
4. rename index and app to tsx file
4. npm start
The error I got:
Module not found: Error: Can't resolve './App' in
'C:\WebDev\threeJs\01-tutorial\src'
I assume it is because it's looking for App.jsx not App.tsx. But I'm not sure what is the reason for that.
Here is some warning I got when npm start:
DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option...
My npm version: 6.14.15
Here is my package.json file:
{
"name": "01-tutorial",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.4.0",
"#types/node": "^17.0.17",
"#types/react": "^17.0.39",
"#types/react-dom": "^17.0.11",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"typescript": "^4.5.5",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

Answer 1

I had the same error, I was in the root folder but my package.json file was a step ahead. I cd into the folder where my package.json file was and it worked for me.