[Bug]: 使用react18和modern.js内置的react-helmet有类型冲突

[alterass]

版本信息

System:
OS: Linux 5.15 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
CPU: (12) x64 AMD Ryzen 5 5600 6-Core Processor
Memory: 13.58 GB / 15.59 GB
Container: Yes
Shell: 5.2.15 - /bin/bash
npmPackages:
@modern-js/app-tools: 2.60.3 => 2.60.3
@modern-js/runtime: 2.60.3 => 2.60.3
@modern-js/tsconfig: 2.60.3 => 2.60.3

问题详情

该bug源自于react-helmet，原因是不兼容 react18，按照社区的说法该项目已经停止维护了，社区给的建议是使用react-helmet-async。

原问题链接：nfl/react-helmet#646

vscode报错，只有将类型断言为any才不报类型错误。

没有与此调用匹配的重载。
第 1 个重载(共 2 个)，“(props: HelmetProps): Helmet”，出现以下错误。
不能将类型“Element”分配给类型“ReactNode”。
类型 "Element" 中缺少属性 "children"，但类型 "ReactPortal" 中需要该属性。
第 2 个重载(共 2 个)，“(props: HelmetProps, context: any): Helmet”，出现以下错误。
不能将类型“Element”分配给类型“ReactNode”。ts(2769)
index.d.ts(378, 9): 在此处声明了 "children"。
index.d.ts(28, 5): 所需类型来自属性 "children"，在此处的 "IntrinsicAttributes & IntrinsicClassAttributes & Readonly" 类型上声明该属性
index.d.ts(28, 5): 所需类型来自属性 "children"，在此处的 "IntrinsicAttributes & IntrinsicClassAttributes & Readonly" 类型上声明该属性

不能使用Fragment，使用Fragment会导致无法正常运行。

多个head子元素，只能使用字符串的形式创建。

Unexpected Application Error!
Cannot convert a Symbol value to a string
TypeError: Cannot convert a Symbol value to a string
at HelmetWrapper.warnOnInvalidChildren (http://localhost:8080/static/js/async/vendors-node_modules_pnpm_rspack_core_1_0_11__swc_helpers_0_5_13_node_modules_rspack_core_dis-43b77d.js:2002:139)
at http://localhost:8080/static/js/async/vendors-node_modules_pnpm_rspack_core_1_0_11__swc_helpers_0_5_13_node_modules_rspack_core_dis-43b77d.js:2031:24
at http://localhost:8080/static/js/lib-react.js:34814:17
at http://localhost:8080/static/js/lib-react.js:34777:17
at mapIntoArray (http://localhost:8080/static/js/lib-react.js:34668:23)
at mapChildren (http://localhost:8080/static/js/lib-react.js:34776:3)
at Object.forEachChildren [as forEach] (http://localhost:8080/static/js/lib-react.js:34813:3)
at HelmetWrapper.mapChildrenToProps (http://localhost:8080/static/js/async/vendors-node_modules_pnpm_rspack_core_1_0_11__swc_helpers_0_5_13_node_modules_rspack_core_dis-43b77d.js:2020:67)
at HelmetWrapper.render (http://localhost:8080/static/js/async/vendors-node_modules_pnpm_rspack_core_1_0_11__swc_helpers_0_5_13_node_modules_rspack_core_dis-43b77d.js:2070:33)
at finishClassComponent (http://localhost:8080/static/js/lib-react.js:20139:31)
💿 Hey developer 👋
You can provide a way better UX than this when your app throws errors by providing your own ErrorBoundary or errorElement prop on your route.

复现链接

nfl/react-helmet#646

复现步骤

1. 使用ts模板创建项目
2. pnpm dev

[alterass]

typescript报错原因是cli工具生成项目后，安装的@types/react和@types/react-dom版本不对导致的，但是还是不能使用Fragment，我后面自己使用react-helmet-async就没问题。

[lanmingle]

怎么说呢，modern.js集成的好像都不是最新的，自己安装最新的，有些好像有兼容性问题，他们好像更加专注的还是 rsbuild ，能用就行了，毕竟优先于内部的工作，社区贡献出来用难听的话来说：就是拿来完善的。

[zllkjc]

可以贴下可复现的仓库，初始化的项目就是带 Helemt 的。你可以直接通过 https://modernjs.dev/apis/app/runtime/utility/head.html#%E6%9B%B4%E5%A4%9A%E7%94%A8%E6%B3%95 使用 helmet

[zllkjc]

因为没有仓库，我不知道你提到的报错是在什么情况下出现的，但多半是由于多个 React Type 引起的，这是个常见的问题，如果你是 Monorepo 项目，更容易出现这样的问题。根本原因是 Helmet 依赖里 "@types/react": "*" 导致的。

[zllkjc]

modern.js 集成的好像都不是最新的，自己安装最新的，能用就行了

没有这回事哈，Modern.js 一直处于频繁迭代的状态，如果有需要或者问题可以给我们提 issue 和 PR。

我们会看下 react-helmet-async，但 Meta 这块会同时考虑 React 19 和 React Router v7。

[alterass]

因为没有仓库，我不知道你提到的报错是在什么情况下出现的，但多半是由于多个 React Type 引起的，这是个常见的问题，如果你是 Monorepo 项目，更容易出现这样的问题。根本原因是 Helmet 依赖里 "@types/react": "*" 导致的。

是monorepo项目，我自己换成react-helmet-async了，暂时通过这个方式绕过去了。

还有就是我用cli工具生成项目，给我安装的@types/react和@types/react-dom版本不对，这个不知道是啥原因，反正要手动重新安装依赖才行。我不在monorepo重新生成一个项目也是一样，这个bug必定复现。

[caohuilin]

还有就是我用cli工具生成项目，给我安装的@types/react和@types/react-dom版本不对，这个不知道是啥原因，反正要手动重新安装依赖才行。我不在monorepo重新生成一个项目也是一样，这个bug必定复现。

@alterass 期望是什么，@types/react和@types/react-dom 也需要使用 18.2.x 版本？

[alterass]

还有就是我用cli工具生成项目，给我安装的@types/react和@types/react-dom版本不对，这个不知道是啥原因，反正要手动重新安装依赖才行。我不在monorepo重新生成一个项目也是一样，这个bug必定复现。

@alterass 期望是什么，@types/react和@types/react-dom 也需要使用 18.2.x 版本？

是的，types的版本和react版本要一致，不然有些地方的tsx会报红色警号，比如react-router-dom的Outlet组件，虽然能运行，但是tsc代码检查报红色警告了。
而且不只react的types安装错了，@types/node也安装错了，我本地node版本是v20，但是cli工具给我安装的是v16的，这不应该啊，我用nestjs cli生成的项目，@types/node就是正常的。
希望能改善下依赖版本的问题，这样也方便向其它人推荐modern.js。