Vite Vue项目集成React组件：生产构建报错排查

问题分析 #

React错误#168对应的完整错误是React检测到组件调用Hook的顺序发生变化，生产环境下代码被压缩后显示为精简错误码。该问题通常由以下原因导致：

• 生产构建时的树摇优化或代码压缩导致React/ReactDOM模块被重复打包，引发Hook运行环境异常
• Vue与React的构建配置冲突，导致React内部状态管理混乱
• 桥接组件频繁销毁重建React Root实例，触发Hook顺序检测机制

解决方案 #

1. 调整Vite配置，避免React模块重复打包 #

修改vite.config.ts，添加依赖预构建和打包拆分配置，确保React相关代码只被打包一次：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [vue(), react(), vueDevTools()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  server: { port: 3000 },
  optimizeDeps: {
    include: ['react', 'react-dom'], // 强制预构建React依赖
  },
  build: {
    rollupOptions: {
      output: {
        // 将React相关代码拆分为独立chunk
        manualChunks: {
          'react-vendor': ['react', 'react-dom'],
        },
      },
    },
    commonjsOptions: {
      include: [/react-dom/, /react/, /node_modules/], // 确保CommonJS模块正确解析
    },
  },
})

2. 优化React桥接组件的渲染逻辑 #

原桥接组件每次更新都销毁重建React Root，容易触发Hook顺序问题。修改为复用Root实例，直接更新渲染：

<script setup lang="ts">
import React from "react";
import ReactDOM from "react-dom/client";
import { onBeforeUnmount, ref, watch } from "vue";

const props = defineProps<{
  component?: React.ReactNode
}>()

const container = ref<HTMLElement | null>(null)
const root = ref<ReactDOM.Root | null>(null)

const initialize = () => {
  if (container.value && props.component) {
    try {
      root.value = ReactDOM.createRoot(container.value);
      root.value.render(props.component);
    } catch (error) {
      console.error("Failed to load react component: ", error);
    }
  }
}

const unmount = () => {
  if (root.value) {
    root.value.unmount();
    root.value = null;
  }
}

onBeforeUnmount(() => {
  unmount();
})

// 复用React Root，直接更新渲染
watch(() => props.component, (newComponent) => {
  if (root.value && newComponent) {
    root.value.render(newComponent);
  } else if (newComponent) {
    initialize();
  }
}, { immediate: true })
</script>

<template>
  <div ref="container"></div>
</template>

3. 减少不必要的React组件更新 #

在使用桥接组件的地方，用Vue的useMemo包裹React元素，避免因props频繁变化触发不必要的更新：

import { useMemo } from 'vue'

// 仅当props变化时重新创建React元素
const myComponent = useMemo(() => React.createElement(MyComponent, props), [props])

<ReactBridgeComponent :component="myComponent"/>

4. 调整构建命令为串行执行 #

修改package.json中的build命令，将并行的类型检查改为串行，避免缓存冲突：

"scripts": {
  // ...
  "build": "run-s type-check react-type-check build-only"
}

验证步骤 #

1. 执行npm run build完成生产构建
2. 执行npm run preview预览构建产物
3. 检查控制台是否仍有错误，验证React组件是否能正常交互

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