React函数组件打包后嵌入独立index.html时CustomButton未定义问题求解

API 探路者

2026-10-2

问题根因

你的webpack配置未指定全局导出的变量名，打包后的组件没有挂载到浏览器window对象上，因此页面内的脚本无法直接访问到CustomButton。

修复步骤

1. 修改webpack配置的output规则

将你现有配置里的output字段替换为以下内容：

output: {
  filename: "index.js",
  path: path.resolve(__dirname, "dist"),
  libraryTarget: "umd",
  library: "MyComponents", // 自定义全局变量名，所有导出的组件都会挂载在该对象下
  globalObject: 'window' // 浏览器环境直接绑定到window对象，避免上下文错误
}

2. 确认组件导出逻辑

你原index.js中的导出规则无需修改，无论是export const CustomButton = xxx的命名导出，还是export default CustomButton的默认导出，打包后都会自动挂载到window.MyComponents对象下。

3. 修改index.html的引用和调用逻辑

首先将你引入的index.js替换为webpack打包后dist目录下的输出文件
删除冗余代码：<script>var exports = {"__esModule": true};</script>，umd打包规则已经自动处理了模块兼容问题，该行代码可能导致冲突
修改组件调用方式，从全局对象中获取CustomButton：

<script type="text/jsx">
  // 命名导出用这个
  ReactDOM.render(<MyComponents.CustomButton />, document.getElementById('root'));
  // 如果是默认导出，用这个：
  // ReactDOM.render(<MyComponents.default />, document.getElementById('root'));
</script>

你可以打包后在浏览器控制台打印window.MyComponents，确认CustomButton的实际挂载位置。