使用Vite+Rollup manualChunks时出现React未初始化引用错误

API 探路者

2026-6-25

问题原因

你手动拆分React/ReactDOM和@emotion的独立chunk后，浏览器加载chunk的顺序不受控，@emotion的chunk先于React chunk执行，而@emotion依赖React，导致执行时React还未初始化，触发Cannot access 'React' before initialization错误。

解决方案

方案1：合并依赖chunk（最简单）

把React、ReactDOM和@emotion打包到同一个vendor chunk，彻底避免依赖顺序问题：

// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules/react/') || id.includes('/node_modules/react-dom') || id.includes('@emotion')) {
            return 'react-vendor';
          }
          // 其他自定义chunk规则...
        }
      }
    }
  }
}

方案2：明确chunk依赖关系

如果要保持分开打包，需让Rollup明确@emotion chunk依赖React chunk，确保React chunk优先加载。修改manualChunks函数，利用moduleInfo参数识别依赖关联：

// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks(id, moduleInfo) {
          if (id.includes('node_modules/react/') || id.includes('/node_modules/react-dom')) {
            return 'react';
          }
          // 标记依赖React的@emotion模块为独立chunk
          if (id.includes('@emotion') && moduleInfo.getImports().some(imp => imp.includes('react'))) {
            return 'emotion';
          }
          // 其他自定义chunk规则...
        }
      }
    }
  }
}

Vite会自动根据chunk的依赖关系，在生成的HTML中确保React chunk先于emotion chunk加载执行。