针对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"]
}