使用 Typescript 的 React 项目中的 tsx 扩展错误

Question

我正在尝试将我的项目从 js 移动到 ts，所以我安装了 typescript，现在我正在将所有文件的扩展名从 .js 更改为 .tsx，然后我尝试再次启动该项目似乎无法解析 .tsx 文件

这是我项目的文件夹树（请注意，我只是出于测试目的将我的 Button 组件更改为 .tsx，而不是所有文件，否则我会得到更多错误）

这是我在控制台中得到的错误

> ERROR in ./src/components/Button/Button.styles.js 3:0-30
Module not found: Error: Can't resolve './Button' in 'C:\Users\sriera\Desktop\Nuevacarpeta\pt\src\components\Button'
resolve './Button' in 'C:\Users\sriera\Desktop\Nuevacarpeta\pt\src\components\Button'
  using description file: C:\Users\sriera\Desktop\Nuevacarpeta\pt\package.json (relative path: ./src/components/Button)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: C:\Users\sriera\Desktop\Nuevacarpeta\pt\package.json (relative path: ./src/components/Button/Button)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\sriera\Desktop\Nuevacarpeta\pt\src\components\Button\Button doesn't exist
      .web.mjs
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\sriera\Desktop\Nuevacarpeta\pt\src\components\Button\Button.web.mjs doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\sriera\Desktop\Nuevacarpeta\pt\src\components\Button\Button.mjs doesn't exist
      .web.js
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\sriera\Desktop\Nuevacarpeta\pt\src\components\Button\Button.web.js doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\sriera\Desktop\Nuevacarpeta\pt\src\components\Button\Button.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\sriera\Desktop\Nuevacarpeta\pt\src\components\Button\Button.json doesn't exist
      .web.jsx
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\sriera\Desktop\Nuevacarpeta\pt\src\components\Button\Button.web.jsx doesn't exist
      .jsx
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\sriera\Desktop\Nuevacarpeta\pt\src\components\Button\Button.jsx doesn't exist
      as directory
        C:\Users\sriera\Desktop\Nuevacarpeta\pt\src\components\Button\Button doesn't exist
 @ ./src/components/UserList/UserList.js 11:0-55 101:45-57
 @ ./src/pages/Home/Home.js 5:0-58 23:35-43
 @ ./src/App.js 8:0-37 27:44-48
 @ ./src/index.js 8:0-24 18:39-42

webpack 5.69.1 compiled with 1 error in 793 ms

ofc，如果我只是将 tsx 扩展名更改为 js 它仍然有效

编辑：这是 package.json

    {
  "name": "pt",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.8.1",
    "@emotion/styled": "^11.8.1",
    "@mui/material": "^5.4.4",
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.26.0",
    "eslint": "^8.10.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.6",
    "react-router": "^6.2.2",
    "react-router-dom": "^6.2.2",
    "react-scripts": "5.0.0",
    "redux": "^4.1.2",
    "redux-thunk": "^2.4.1",
    "styled-components": "^5.3.3",
    "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": {
    "@testing-library/react": "^12.1.3",
    "jest": "^27.5.1",
    "redux-devtools": "^3.7.0",
    "redux-devtools-extension": "^2.13.9",
    "typescript": "^4.6.2"
  }
}

有人有想法吗？

谢谢！

Answer 1

默认的 CRA 模板是为 JavaScript 而不是 TypeScript 构建的。

您现在可以按照Tiago提供的文章中的步骤进行操作。此外，从下次开始，如果您想默认使用 TypeScript，那么 CRA 会提供一个模板

npx create-react-app <App Name> --template typescript

使用 Typescript 的 React 项目中的 tsx 扩展错误

tsx extension error in React project with Typescript

javascript

reactjs

webpack

tsx