使用Webpack 5构建React组件库时遇require未定义等错误求助

针对你用Webpack 5 + React 18构建组件库时出现的两个错误，直接给出对应的修复方案和配置调整说明：

错误原因分析 #

1. require is not defined：你的externals配置使用了commonjs-module格式，这种格式会让Webpack生成依赖CommonJS规范的代码，而浏览器原生环境不支持require函数。
2. myLibrary is not defined：UMD库的全局暴露配置不完整，导致浏览器全局环境无法正确获取到你的库实例。

修改后的webpack.config.js #

const path = require("path");

module.exports = {
  entry: path.join(__dirname, "src", "index.js"),
  // 明确构建模式，避免webpack默认警告和冗余代码
  mode: "production",
  // 指定目标环境为浏览器，防止webpack注入Node.js相关模块
  target: "web",
  output: {
    filename: "myLibrary.js",
    libraryTarget: "umd",
    library: "myLibrary",
    path: path.resolve(__dirname, "build"),
    // 解决UMD在浏览器环境下的全局对象指向问题
    globalObject: "this",
    // 如果入口文件是默认导出，添加这行确保全局环境能拿到导出内容
    libraryExport: "default",
  },

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
      // 新增React相关语法的babel处理（如果代码用到JSX或ES新特性）
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: "babel-loader",
      },
    ],
  },
  resolve: {
    extensions: [".js", ".jsx", ".json", ".ts", ".tsx"],
  },

  // 调整externals为多模块兼容格式，支持浏览器全局、CommonJS、AMD等场景
  externals: {
    react: {
      root: "React",
      commonjs: "react",
      commonjs2: "react",
      amd: "react",
    },
    "react-dom": {
      root: "ReactDOM",
      commonjs: "react-dom",
      commonjs2: "react-dom",
      amd: "react-dom",
    },
  },
};

关键修改点说明 #

• target: "web"：强制Webpack针对浏览器环境构建，不会生成Node.js特有的代码逻辑（比如require相关的注入）。
• externals格式调整：替换commonjs-module为多环境兼容配置，让你的库在浏览器（通过全局变量React/ReactDOM）、Node.js（通过require）、AMD模块系统下都能正常工作。
• globalObject: "this"：解决UMD规范在浏览器中全局对象指向的问题，避免出现window is not defined这类衍生错误。
• libraryExport: "default"：如果你的src/index.js使用export default导出组件库入口，这行配置能确保浏览器全局环境下window.myLibrary直接指向你的默认导出内容。

额外注意事项 #

1. 确保入口文件正确导出组件：

   // 示例1：默认导出单个组件
   import MyButton from "./components/MyButton";
   export default MyButton;
   
   // 示例2：导出多个组件
   export { MyButton, MyInput } from "./components";
   

2. 浏览器测试时的引入方式：

   <!-- 先引入React和ReactDOM的CDN资源 -->
   <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
   <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
   <!-- 再引入你的组件库 -->
   <script src="./build/myLibrary.js"></script>
   <!-- 通过window.myLibrary访问组件 -->
   <script>
     const MyButton = window.myLibrary;
     // 后续可使用ReactDOM.render渲染组件
   </script>
   

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