基于Webpack构建的CommonJS React组件库在示例项目运行报错如何解决？

你遇到的报错是React多实例冲突导致的，结合你的配置，有多处不符合类库打包规范的问题，按以下步骤修改即可：

必改项（解决运行报错） #

• 移除所有react-hot-loader相关配置：这是本地开发热更专用的工具，不能用于生产类库打包
  • 删除entry配置中的react-hot-loader前缀，直接改为entry: './index.tsx'
  • 删除babel plugins数组中的react-hot-loader/babel项
  • 删除resolve.alias中的react-dom: '@hot-loader/react-dom'配置
• 新增externals配置，排除React相关依赖：类库不应该把React、React-dom打包进产物，而是复用宿主项目的依赖，避免多实例冲突
  在webpack配置中新增一级节点：

  externals: {
    react: 'commonjs react',
    'react-dom': 'commonjs react-dom'
  }
  

• 修改package.json依赖配置：把react、react-dom从dependencies移到peerDependencies中，明确要求宿主项目提供对应版本的React依赖

优化项（修复其他配置错误） #

• 开启CSS Modules：你提到用到了CSS Modules，但当前配置中css-loader没有开启对应参数，修改css处理规则：

  {
    test: /\.(scss|css)$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          modules: true, // 开启CSS Modules能力
          importLoaders: 1
        }
      },
      'sass-loader'
    ]
  }
  

• 修改生产环境devtool配置：eval-source-map是开发专用配置，会生成带eval执行的产物，生产类库建议改为devtool: 'source-map'或者关闭
• 修复ESLint解析器配置：你使用了TypeScript，但当前ESLint配置用的是@babel/eslint-parser，建议替换为@typescript-eslint/parser，避免TS语法校验异常

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