解决React中 “xxxx”不能用作 JSX 组件问题

报错

“DatePicker”不能用作 JSX 组件。\
其实例类型 "Component<PickerProps<Moment> & { status?: "" | "warning" | "error" | undefined; }, unknown, any> & CommonPickerMethods" 不是有效的 JSX 元素。\
在这些类型中，"render()" 返回的类型不兼容。\
不能将类型“React.ReactNode”分配给类型“import("/Users/chenxiaoyu/Documents/test/react-pc-master/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode”。\
不能将类型“{}”分配给类型“ReactNode”。ts(2786)

项目环境

"devDependencies": {
    "@types/react": "17.0.38",
    "@types/react-dom": "17.0.11"
}

该问题上网搜了下，确实有，但是数量不多。应该是 @types/react 版本加上环境问题，公司目前没有一个同事遇到，包括相同项目只有我的电脑报错。

网上目前没有一个相对好解决办法，总结了几个自己的经验希望能帮到大家：

1. 指定@types/react版本

"devDependencies": {
    "@types/react": "18.0.8"
}

这只是一个临时的解决版本，毕竟跨大版本升级，有无bug兼容性问题未知。

2. 通过 resolutions 指定版本

"resolutions": {
    "@types/react": "17.0.30" 
},

使用yarn：在package.json文件内，与dependencies平级后，添加配置，指定@types/react版本，可尝试17.0.44或17.0.45，删除yarn.lock，重新yarn install即可；

使用npm的配置与yarn雷同：在package.json文件内，与dependencies平级后，添加配置，然后在package.json文件内，在scripts内新增一行，添加配置"preinstall": "npx force-resolutions" 保存好后，删除package-lock.json文件，执行npm install，再执行npm run preinstall即可。

该方法参考「骑上我心爱的小摩托」： 原文链接：blog.csdn.net/cxwtsh123/a…

3. 删除.configstore文件，卸载npm并清除缓存后重装

• 删除 C:/Users/{username}/.config/ 下的configstore文件

• 卸载从官网下载pkg安装的node

sudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,share/man/*/node.*}

• 删除 npm 相关内容

sudo npm uninstall npm -g
sudo rm -rf ~/.npm

重新安装后我的版本如下,

node : v14.18.3;
npm : 6.14.15;

进入项目后npm i,如果报下面错误

# npm - 报错：found XXX vulnerabilities (XXX low, X moderate)，run `npm audit fix` to fix them, or `npm audit` for details

直接按照提示的命令执行：

npm audit fix

如果还报错，可以尝试 清除缓存：

npm cache clean --force

然后删掉node_modules再npm i一遍，大概率能解决问题（反正我最后是这样解决了QAQ）