error TS2786: ‘SortableBody‘ cannot be used as a JSX component.

报错信息如下

3829[2022-11-01T20:29:05.463][CompileProject][INFO] src/components/columnSelectorC/index.tsx(155,6): error TS2786: 'SortableBody' cannot be used as a JSX component.
3830[2022-11-01T20:29:05.463][CompileProject][INFO]   Its instance type 'Component' is not a valid JSX element.
3831[2022-11-01T20:29:05.463][CompileProject][INFO]     The types returned by 'render()' are incompatible between these types.
3832[2022-11-01T20:29:05.463][CompileProject][INFO]       Type 'React.ReactNode' is not assignable to type 'import("/gaia/workspace-job/git.xiaojukeji.com/Ghost/mjvir/node_modules/@types/react-router/node_modules/@types/react/index").ReactNode'.
3833[2022-11-01T20:29:05.463][CompileProject][INFO] src/components/columnSelectorC/index.tsx(165,12): error TS2786: 'SortableItem' cannot be used as a JSX component.
3834[2022-11-01T20:29:05.463][CompileProject][INFO]   Its instance type 'Component' is not a valid JSX element.
3835[2022-11-01T20:29:05.464][CompileProject][INFO] src/components/columnSelectorC/index.tsx(177,29): error TS2786: 'DragHandle' cannot be used as a JSX component.
3836[2022-11-01T20:29:05.464][CompileProject][INFO]   Its instance type 'Component' is not a valid JSX element.
3837[2022-11-01T20:29:05.464][CompileProject][INFO]     The types returned by 'render()' are incompatible between these types.
3838[2022-11-01T20:29:05.464][CompileProject][INFO]       Type 'React.ReactNode' is not assignable to type 'import("/gaia/workspace-job/git.xiaojukeji.com/Ghost/mjvir/node_modules/@types/react-router/node_modules/@types/react/index").ReactNode'.
3839[2022-11-01T20:29:05.464][CompileProject][INFO] src/components/lazyLoad/index.tsx(21,6): error TS2786: 'InView' cannot be used as a JSX component.
3840[2022-11-01T20:29:05.464][CompileProject][INFO]   Its instance type 'InView' is not a valid JSX element.
3841[2022-11-01T20:29:05.464][CompileProject][INFO]     The types returned by 'render()' are incompatible between these types.
3842[2022-11-01T20:29:05.464][CompileProject][INFO]       Type 'React.ReactNode' is not assignable to type 'import("/gaia/workspace-job/git.xiaojukeji.com/Ghost/mjvir/node_modules/@types/react-router/node_modules/@types/react/index").ReactNode'.
3843[2022-11-01T20:29:05.464][CompileProject][INFO] src/pages/directDelivery/brandAdManage/createDrawer.tsx(233,12): error TS2786: 'DatePicker.RangePicker' cannot be used as a JSX component.
3844[2022-11-01T20:29:05.464][CompileProject][INFO]   Its instance type 'Component, unknown, any> & CommonPickerMethods' is not a valid JSX element.
3845[2022-11-01T20:29:05.464][CompileProject][INFO]     The types returned by 'render()' are incompatible between these types.
3846[2022-11-01T20:29:05.464][CompileProject][INFO]       Type 'React.ReactNode' is not assignable to type 'import("/gaia/workspace-job/git.xiaojukeji.com/Ghost/mjvir/node_modules/@types/react-router/node_modules/@types/react/index").ReactNode'.
3847[2022-11-01T20:29:05.464][CompileProject][INFO]         Type '{}' is not assignable to type 'ReactNode'.

原因

@types的版本跟typescript的版本冲突了，那我们需要怎么解决呢，其实是可以通过查看来决定安装对应的包版本的。
参考文档：https://www.swvq.com/boutique/detail/64737
react、react-dom版本的引入问题，之前引入的版本是

"react": "^17.0.0",
"react-dom": "^17.0.0",

尝试采用https://github.com/casesandberg/react-color/issues/855 中的解决方案，并未解决！！

 "resolutions": {
    "@types/react": "^18.0.0"
  },
  // resolutions 字段用于添加需要指定版本的依赖

因为新版react中有一些大批量改动，
再次尝试，重新安装最新版react
安装前先删除node_modules、package-lock.json、yarn.lock文件

# 👇️ with NPM
npm install --save-dev @types/react@latest @types/react-dom@latest

# 👇️ if you also want to update react and react-dom
npm install react@latest react-dom@latest

# ------------------------------

# 👇️ with YARN
yarn add @types/react@latest @types/react-dom@latest --dev

# 👇️ if you also want to update react and react-dom
yarn add react@latest react-dom@latest

参考资料： https://lequ7.com/guan-yu-reactjsreact-bao-cuo-zhi-zu-jian-bu-neng-zuo-wei-jsx-zu-jian-shi-yong.html