React独立库named exports导入为undefined问题排查

你的导入、导出语法完全符合规范，问题出在Webpack库打包配置缺失：当前配置没有声明要将入口文件的导出内容对外暴露，Webpack默认会把所有逻辑包裹在自执行闭包中，打包生成的dist/main.js只是一个可独立运行的脚本，不会将任何变量挂载到模块导出对象上，外部项目引入时自然只能拿到undefined。

具体配置错误 #

• 完全缺失output配置项：Webpack 5 默认不会主动暴露入口模块的导出，必须手动配置库输出规则，才能让打包产物支持被外部项目import/require引入。
• 冗余的构建参数：package.json里的build脚本重复传入了--entry参数，和Webpack配置文件内的entry声明冲突，可能导致打包路径异常。
• 错误的依赖声明：
  • 把react、react-dom放在了dependencies中，打包时会将React源码打入库产物，会导致测试项目中存在两份React副本，后续使用Hook时会触发「无效Hook调用」报错。
  • 把构建工具webpack放在了dependencies中，用户安装你的库时会额外拉取不必要的Webpack依赖。
• 冗余的resolve.modules配置：手动写死node_modules绝对路径会干扰Webpack默认的依赖查找逻辑，可能引发依赖版本冲突。

修复步骤 #

1. 重写Webpack配置文件，补充输出规则、外部依赖声明，移除冗余配置：

// webpack.config.js
const path = require('path')

module.exports = {
  mode: 'development',
  entry: path.resolve(__dirname, 'src/sign-in-with-google.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
    // 配置UMD通用模块格式，同时支持CommonJS、ESM、浏览器脚本标签引入
    library: {
      type: 'umd',
      name: 'react-google-identity'
    },
    // 兼容Node.js和浏览器环境的全局对象
    globalObject: 'this'
  },
  // 声明外部依赖，不将react、react-dom打入产物
  externals: {
    react: {
      commonjs: 'react',
      commonjs2: 'react',
      amd: 'React',
      root: 'React'
    },
    'react-dom': {
      commonjs: 'react-dom',
      commonjs2: 'react-dom',
      amd: 'ReactDOM',
      root: 'ReactDOM'
    }
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(js|jsx)$/i,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react']
        }
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  }
}

2. 调整package.json配置：
   • 简化build脚本，移除冗余的entry参数
   • 将react、react-dom、webpack从dependencies中移除（react/react-dom保留在peerDependencies即可，webpack移到devDependencies）

{
  "scripts": {
    "test": "jest",
    "test:watch": "jest --watch",
    "lint": "prettier ./src ./__tests__",
    "lint:fix": "prettier --write ./src ./__tests__",
    "build": "webpack build",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "classnames": "^2.3.1",
    "prop-types": "^15.8.1"
  },
  "devDependencies": {
    // 其余原有devDependencies保留，webpack移到该节点下
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0"
  }
}

3. 重新执行npm run build生成新的产物，在测试项目中更新依赖引用，即可正常获取到命名导出的组件和Hook。

验证方式 #

重新打包后打开生成的dist/main.js，如果能在文件末尾找到类似module.exports = __webpack_exports__的逻辑，说明导出规则已经生效。

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