升级Rollup至3.5.0后React组件库报错：React.jsx类型无效

针对你遇到的React.jsx: type is invalid错误，核心原因是主项目导入组件时拿到的是对象而非函数/类，以下是具体排查方向：

1. 检查CJS产物的导出语句 #

查看dist/cjs/index.js的末尾，确认组件的导出方式：

• 如果你的源码是export default MyLibraryComponent，Rollup v3默认对CJS格式的导出处理和v2不同，可能会生成：

  module.exports.default = MyLibraryComponent;
  

  而非v2的：

  module.exports = MyLibraryComponent;
  

  这种情况下，主项目用require('@my-react-component-library')拿到的是包含default属性的对象，而非组件本身，直接传入React就会触发错误。

解决尝试：在CJS输出配置中显式设置exports: 'auto'：

{
  file: 'dist/cjs/index.js',
  format: "cjs",
  sourcemap: true,
  exports: 'auto' // 新增这一行
}

2. 验证主项目的导入结果 #

在主项目中添加调试代码，打印导入的组件：

const MyLibraryComponent = require('@my-react-component-library');
console.log(MyLibraryComponent);

如果输出是{ default: [Function] }，说明需要修改导入方式为：

const MyLibraryComponent = require('@my-react-component-library').default;

或者调整Rollup配置让CJS产物直接把组件赋值给module.exports。

3. 核对Rollup v3的配置变更 #

Rollup 3.x对CJS模块的导出逻辑做了调整：

• v2中format: 'cjs'默认exports: 'auto'，会自动识别导出类型并适配
• v3中默认exports: 'named'，如果是默认导出，必须显式指定exports: 'auto'或exports: 'default'才能让产物直接导出组件本身

检查你的Rollup配置，确保CJS输出的exports选项正确设置。

4. 检查TypeScript配置兼容性 #

确认tsconfig.json中的关键配置：

• module是否为CommonJS（和主项目规范一致）
• allowSyntheticDefaultImports是否开启（如果源码用了ES模块的默认导出）
• declaration是否开启（确保类型文件和实际导出匹配）

同时验证Rollup的typescript插件是否正确读取了tsconfig.json，没有覆盖关键配置。

5. 排查插件兼容性 #

你使用的rollup-plugin-peer-deps-external版本是1.1.23，该版本发布于2021年，可能和Rollup 3.x存在兼容性问题：

• 暂时禁用该插件，重新打包组件库，测试主项目是否能正常导入组件
• 如果问题消失，尝试升级该插件到最新版本

6. 对比Rollup v2和v3的产物差异 #

回退到Rollup 2.70.1版本打包一次，对比两个版本下dist/cjs/index.js的导出部分代码：

• 重点看module.exports的赋值逻辑差异
• 以此定位是Rollup本身的导出逻辑变化导致的问题

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