React组件库在Webpack旧项目无法导入使用的问题求助

组件库文件结构 #

• main_folder
  • lib
    • Button
      • index.jsx
    • main.js

组件与入口代码 #

Button组件（lib/Button/index.jsx） #

export function Button(){
    return <button>Deneme</button>
}

入口文件（lib/main.js） #

export { Button } from './Button/index.jsx'
// 注：原代码路径写为./components/Button，与实际文件结构不符，已修正

Vite构建配置（vite.config.js） #

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { resolve } from 'path';

export default defineConfig({
  plugins: [react()],
  build: {
    lib: {
      entry: resolve(__dirname, 'lib/main.js'),
      name: 'salaui',
      formats: ['es']
    },
    rollupOptions: {
      external: ['react', 'react-dom', 'react/jsx-runtime'],
    }
  }
})

组件库package.json配置 #

{
  "name": "salaui",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview",
    "prepublishOnly": "npm run build"
  },
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "salaui": "file:"
  },
  "devDependencies": {
    "@eslint/js": "^9.21.0",
    "@types/react": "^19.0.10",
    "@types/react-dom": "^19.0.4",
    "@vitejs/plugin-react": "^4.3.4",
    "eslint": "^9.21.0",
    "eslint-plugin-react-hooks": "^5.1.0",
    "eslint-plugin-react-refresh": "^0.4.19",
    "globals": "^15.15.0",
    "vite": "^6.2.0"
  },
  "main": "dist/salaui.js",
  "files": [
    "dist"
  ]
}

问题描述 #

组件库的Button组件在Vite新项目中可正常渲染，但在Webpack旧项目中导入时触发错误：
Objects are not valid as a React child (found: object with keys {$$typeof, type, key, props, _owner, _store}). If you meant to render a collection of children, use an array instead.

旧项目Webpack开发配置（webpack.dev.js） #

const { merge } = require('webpack-merge');
const common = require('./webpack.common');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'source-map',
  devServer: {
    port: 3100,
    https: true,
    host: 'localhost',
    historyApiFallback: true,
    hot: true,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
      'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization'
    }
  }
});

排查与解决方案 #

1. 修正路径错误 #

先确认入口文件lib/main.js的导入路径，原代码写的./components/Button与实际文件结构不符，改为./Button/index.jsx避免导入失败。

2. 解决React版本与JSX运行时冲突 #

组件库使用React 19，旧Webpack项目大概率使用更低版本（如17/18），不同版本的JSX编译产物不兼容：

• 若旧项目无法升级React，将组件库的React版本降级到与旧项目一致；
• 若可行，将旧项目升级到React 19，并确保Webpack/Babel配置支持React 19的JSX运行时。

3. 添加CommonJS格式构建产物 #

组件库当前仅输出ES模块，旧Webpack项目对ES模块的支持可能不完善：

• 修改vite.config.js的formats配置，同时输出ES和CJS格式：

  formats: ['es', 'cjs']
  

• 更新package.json的入口字段，明确区分两种产物：

  "main": "dist/salaui.cjs",
  "module": "dist/salaui.js",
  

4. 配置React为Peer依赖 #

组件库将React列为直接依赖，可能导致旧项目中出现多个React实例，引发元素识别错误：

• 修改package.json，将React移至peerDependencies，仅保留为开发依赖：

  "dependencies": {
    // 移除react、react-dom、salaui的直接依赖
  },
  "peerDependencies": {
    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
  },
  "devDependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    // 其他开发依赖保留
  }
  

• 同时移除dependencies中的salaui: "file:"，避免循环依赖。

5. 检查旧项目的Babel配置 #

旧Webpack项目若用Babel编译React代码，需确保开启自动JSX runtime：

• 确保@babel/preset-react配置中设置runtime: 'automatic'：

  {
    "presets": [
      ["@babel/preset-react", { "runtime": "automatic" }]
    ]
  }
  

• 安装@babel/plugin-transform-react-jsx-runtime依赖，确保JSX运行时正确注入。

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