使用Rollup构建React TSX应用时遇createRoot导出错误求助

1. 升级React与React-DOM版本 #

createRoot是React 18及以上版本新增的API，若你的react-dom版本低于18，必然出现该错误。执行以下命令升级：

npm install react@latest react-dom@latest

或指定明确稳定版本：

npm install react@^18.2.0 react-dom@^18.2.0

2. 优化Rollup的resolve插件配置 #

确保@rollup/plugin-node-resolve正确识别ES模块，修改Rollup配置中的resolve部分：

resolve({
  mainFields: ['module', 'main'], // 优先读取ES模块入口
  extensions: ['.js', '.jsx', '.ts', '.tsx'], // 支持的文件扩展名
  preferBuiltins: false // 不优先使用Node.js内置模块
})

3. 锁定依赖版本避免被第三方库降级 #

你的项目依赖@marquito73/marquito-utils-react-lib，该库可能强制依赖低版本react-dom，导致版本被降级。通过以下方式锁定版本：

• 先安装依赖版本锁定工具：

  npm install -D npm-force-resolutions
  

• 在package.json中添加配置：

  "resolutions": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "scripts": {
    "preinstall": "npx npm-force-resolutions"
  }
  

• 重新安装依赖：

  rm -rf node_modules package-lock.json
  npm install
  

4. 修正TypeScript配置 #

确保tsconfig.json适配React 18的JSX转换规则：

{
  "compilerOptions": {
    "jsx": "react-jsx", // React 18推荐的JSX转换模式
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "target": "es5",
    "moduleResolution": "node"
  }
}

5. 清理缓存后重新构建 #

清理依赖缓存与构建产物，重新执行构建：

rm -rf node_modules package-lock.json ../wwwroot/dist
npm install
npm run rollup -c

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