使用Rollup构建React 17设计系统库时遇'react/jsx-runtime'解析错误求助

以下是针对你遇到问题的具体解决方案：

1. 确认peerDependencies配置 #

确保你的package.json中peerDependencies正确声明了React和ReactDOM的版本，且覆盖17.0.1：

"peerDependencies": {
  "react": "^17.0.0",
  "react-dom": "^17.0.0"
}

React 17及以上版本自带jsx-runtime模块，无需将其添加到dependencies中，依赖使用方安装符合版本的React即可。

2. 更新Rollup resolve插件配置 #

jsnext参数已被弃用，替换为更标准的配置，确保Rollup能正确解析各类模块：

resolve({
  extensions: ['.ts', '.tsx', '.js', '.jsx'],
  mainFields: ['module', 'main', 'browser']
})

3. 调整commonjs插件设置 #

react/jsx-runtime本身是ES模块，无需通过commonjs插件转换，修改配置排除该模块，并简化namedExports：

commonjs({
  include: /node_modules\/(?!react\/jsx-runtime|react\/jsx-dev-runtime)/,
  namedExports: {
    'styled-components': [ 'styled', 'css', 'ThemeProvider' ]
  }
})

4. 检查TypeScript编译配置 #

确保tsconfig.json中的jsx选项与Babel的自动运行时配置匹配：

{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

5. 清理缓存重新构建 #

删除缓存文件后重新安装依赖并构建，避免旧缓存导致的问题：

rm -rf node_modules dist
npm install
npm run build

内容的提问来源于stack exchange，提问作者Lorenzo De Francesco