I'm converting my .js files to .tsx because I want to work with TypeScript.

I added TypeScript with yarn add typescript @types/node @types/react @types/react-dom @types/jest and started to convert index.tsx then App.tsx

With tsx extension I get this error :

Error: Cannot find module './App'
    at webpackMissingModule (bundle.js:16:50)
    at ./src/index.tsx (bundle.js:16:130)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at startup:7:1
    at startup:7:1

With .js extension, everything works fine.

Here is my package.json

{
  "name": "workout_generator",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.10.0",
    "@emotion/styled": "^11.10.0",
    "@headlessui/react": "^1.6.6",
    "@mui/material": "^5.9.3",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^14.4.2",
    "@types/jest": "^28.1.6",
    "@types/node": "^18.6.4",
    "@types/react": "^18.0.15",
    "@types/react-dom": "^18.0.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.4.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.7.4",
    "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"
    ]
  },
  "devDependencies": {
    "autoprefixer": "^10.4.8",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.1.8"
  }
}

Any idea where is my mistake ?

CodePudding user response：

You need to inform webpack it needs to parse tsx files as well. I'm not familiar with Create-React-App, but if you run yarn eject you will have access to the webpack.config.js file.

In the field resolvejust add tsx:

resolve: {
      extensions: [".ts", ".tsx", ".js", "jsx", ".json"]
     }

You will also need a tsconfig.json file. It generally looks like this:

{
  "compilerOptions": {
    "outDir": "./build/",
    "baseUrl": "./",
    "skipLibCheck": true,
    "noEmit": true,
    "noImplicitAny": false,
    "downlevelIteration": true,
    "lib": ["es6", "es2019.array", "dom"],
    "rootDir": "src",
    "module": "commonjs",
    "target": "es5",
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "jsx": "react",
    "allowJs": true
  },
  "include": ["./src/**/*", "./custom.d.ts"],
  "exclude": ["node_modules"]
}

Last but not least, you will need to use @babel/preset-typescript in your .babelrc file.

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    [
      "@babel/plugin-transform-runtime",
      {
        "regenerator": true
      }
    ]
  ]
}

If it sounds like too much trouble, I'd recommend using alright-react-app, or to recreate a project from scratch with the --typescript flag.