在Preact项目集成React 18组件时createRoot失效问题求助

核心原因 #

Preact的compat包对React 18的createRoot API做了单独路径处理，你的别名配置没覆盖到react-dom/client的导入，同时externals规则可能干扰了模块替换逻辑。

1. 补全Webpack别名配置 #

将react-dom/client直接映射到Preact的对应实现，修改resolve.alias：

resolve: {
  alias: {
    'react': 'preact/compat',
    'react-dom': 'preact/compat',
    'react-dom/client': 'preact/compat/client'
  }
}

Preact在preact/compat/client路径下提供了和React 18一致的createRoot实现，这个别名能让第三方组件的导入直接指向正确的代码。

2. 清理externals的干扰 #

你的externals配置中包含"runtime-react"和"runtime-react-dom"，这会让Webpack跳过对这些模块的别名替换，直接从外部环境加载。如果项目不需要外部提供React相关依赖，建议移除这两项：

externals: [
  null
]

若必须保留外部依赖，需确保外部环境的runtime-react-dom包含client导出，或者给externals添加规则排除react-dom/client模块的外部化处理。

3. 优化Babel配置 #

你已经开启了Preact的自动JSX转换，无需再保留@babel/preset-react，避免重复处理导致的冲突：

presets: [
  "@babel/preset-env"
],
plugins: [
  [
    "@babel/plugin-transform-react-jsx",
    {
      "throwIfNamespace": true,
      "runtime": "automatic",
      "importSource": "preact"
    }
  ],
  "@babel/plugin-proposal-class-properties"
]

4. 确认Preact版本要求 #

Preact从10.10.0版本开始支持react-dom/client的兼容API，先检查当前版本：

npm list preact

若版本过低，执行升级命令：

npm install preact@latest preact/compat@latest

完成以上步骤后重新打包项目，createRoot即可正常调用，不会再出现空函数的问题。

内容的提问来源于stack exchange，提问作者VerityFL