自定义组件库多React实例冲突，改配置后缺react/jsx-runtime如何解决

你遇到的构建报错是两个配置遗漏共同导致的：

1. React 17+ 默认启用自动JSX转换，编译后的TSX/JSX代码会自动引入react/jsx-runtime依赖，你当前的webpack externals仅外置了react和react-dom根路径，没有覆盖react/jsx-runtime这个子路径，导致构建时找不到该模块。
2. 你将react、react-dom移到peerDependencies后，没有在devDependencies中保留开发环境需要的React依赖：peerDependencies是给组件库的消费方声明依赖版本用的，组件库本地开发、构建、跑测试的阶段依然需要安装React依赖。

1. 补全webpack externals配置 #

修改webpack.config.js中的externals字段，新增react/jsx-runtime的外置规则：

module.exports = {
  // ...其他配置保持不变
  externals: {
    'react': {
      commonjs: 'react',
      commonjs2: 'react'
    },
    'react/jsx-runtime': {
      commonjs: 'react/jsx-runtime',
      commonjs2: 'react/jsx-runtime'
    },
    'react-dom': {
      commonjs: 'react-dom',
      commonjs2: 'react-dom'
    }
  }
}

2. 将React添加为开发依赖 #

在组件库目录下执行以下命令，保证本地构建、开发阶段可用React：

npm i react@^17.0.2 react-dom@^17.0.2 --save-dev

配置修改完成后删除node_modules、lock文件重新执行npm i，再执行构建命令即可正常编译。

内容的提问来源于stack exchange，提问作者Arda Tümay