针对Umi、React中遇到的 “xxxx”不能用作 JSX 组件 问题解决方案

一、处理方案

1. 这是因为"@types/react"、"@types/react-dom"在子依赖中使用的版本不一致导致，一般情况npm会自动帮我们处理版本不一致的问题。如果npm处理不了，就需要我们自己手动处理
2. 在package.json中添加一项配置

   {
       name:"test"，
       version:"1.0.0",
       ...,
       "devDependencies": {
           "@types/react": "17.0.0",
           "@types/react-dom": "17.0.0"
       },
       "resolutions": {
           "@types/react": "17.0.0",
           "@types/react-dom": "17.0.0"
        },
   }
   

3. 在package.json中的scripts中添加一行命令

   {
       "scripts":{
           "preinstall": "npx force-resolutions"
       }
   }
   

4. 配置完成之后要执行一次preinstall命令：npm run preinstall 。如果执行命令后还是会有报错，执行 npm i 安装全部依赖，再次执行 npm run preinstall

二、原因

以下内容引用自：package.json中的resolutions作用_package.json resolutions-CSDN博客

resolutions 是一个用于解决依赖项冲突的 npm 特殊字段。在某些情况下，您的项目依赖项可能需要不同的版本，而这些版本之间可能存在冲突。这时候，您可以使用 resolutions 字段来指定应该使用哪个版本，以解决这些冲突。

例如，如果您的项目依赖于 package-a 和 package-b，而这两个包都依赖于 package-c，但它们依赖于 package-c 的不同版本，这会导致冲突。在这种情况下，您可以在 package.json 文件中使用 resolutions 字段来指定应该使用哪个版本。例如：

{
  "dependencies": {
    "package-a": "^1.0.0",
    "package-b": "^2.0.0"
  },
  "resolutions": {
    "package-c": "^1.2.0"
  }
}

在这个示例中，我们指定了 package-c 的版本应该是 ^1.2.0。这意味着当 npm 安装依赖项时，它将使用 1.2.x 系列中的最新版本来解决 package-a 和 package-b 之间的冲突。

需要注意的是，resolutions 字段只在您的项目依赖项中出现冲突时才需要使用。在大多数情况下，npm 可以自动解决依赖项之间的冲突，而无需使用 resolutions 字段。

当某些安全扫描工具（例如fossa）扫描出项目依赖的子依赖版本需要升级的情况，也可以尝试使用此方法来解决。

在package.json文件里添加跟scripts、dependencies、evDependencies平级的resolutions，把想要强制升级的子依赖期望版本写入，scripts里添加配置"preinstall": "npx force-resolutions"，最后像启动项目一样使用npm run preinstall运行下载，最后达成目的。

{
  "name": "xxx",
  "version": "1.0.0",
  "description": "xxx",
  "author": "xxx",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --hot --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "build": "node build/build.js",
    "preinstall": "npx force-resolutions"
  },
  "dependencies": {
    "@types/echarts": "0.0.13",
    "ajv": "^6.12.6",
    "awe-dnd": "^0.3.4",
    "axios": "^0.26.0",
    "babel-polyfill": "^6.26.0"
  },
  "devDependencies": {
    "vue-template-compiler": "^2.6.11",
    "webpack": "^3.12.0",
    "webpack-bundle-analyzer": "^2.13.1",
    "webpack-merge": "^4.2.2"
  },
  "resolutions": {
    "lodash.template": "4.5.0",
    "eventsource": "1.1.1",
    "ms":"https://registry.npmjs.org/ms/-/ms-2.1.3.tgz"
  },
  "engines": {
    "node": ">= 12.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}