React独立库集成异常：无法识别React依赖问题求助

开发者阿泽

2026-6-25

解决方案

你的核心问题是将React/ReactDOM标记为外部依赖后，库无法在无外部React环境的场景下运行，而你需要的是完全自主独立的库，所以需要调整构建配置，把React和ReactDOM打包进输出文件中：

1. 修改Vite构建配置

移除rollupOptions.external中的react和react-dom，让Rollup将这两个依赖打包进你的库文件，不再依赖外部环境：

// 修改后的vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  build: {
    lib: {
      entry: path.resolve(__dirname, './src/main.tsx'),
      name: 'accessibility-turnkey',
      formats: ['es', 'umd'],
      fileName: (format) => `accessibility-turnkey.${format}.js`,
    }, 
    rollupOptions: {
      // 移除external配置，取消将React/ReactDOM视为外部依赖
      // external: ['react', 'react-dom']
    },
    emptyOutDir: true,
  }
})

2. 调整package.json依赖

确保react和react-dom在dependencies字段中（如果之前在devDependencies里，需要移过来），这样打包工具能正确获取它们的代码并打包：

// package.json 中相关部分
"dependencies": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  // 你的其他依赖
}

报错原因说明

ES模块报错：标记为外部依赖后，生成的ES代码会直接使用import "react"这种裸模块导入，浏览器无法解析非相对/绝对路径的模块，因此报错。打包后，Rollup会将React代码整合进库中，消除裸导入。
UMD模块报错：UMD模式下，外部依赖会被映射到全局变量（比如window.React），如果环境中没有这个全局变量，就会出现undefined读取属性的错误。打包后，React代码内置在库中，不再依赖全局变量。