'npm start can't detect tsx file

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"
    ]
  }
}
reactjstypescriptnpm


Solution 1:[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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 keshgurung

Related Questions