将React应用打包为npm包安装到另一React应用后，事件处理器失效求助

你遇到的问题是Project-A打包后的Button组件在Project-B中渲染正常，但点击事件无响应，结合你已配置peerDependencies和Webpack externals的情况，以下是需要检查和修正的关键点：

1. 先修正组件逻辑的小问题 #

你的Button组件初始state值是'click here!'（带感叹号），但handleClick中的判断条件是buttonText === 'click here'（不带感叹号），这会导致第一次点击后文本切换为'click here'，后续点击才会触发状态切换。虽然这不是点击处理器未触发的根本原因，但先修正该逻辑避免混淆：

import React, { useState } from 'react';

const Button = () => {
  const [buttonText, setButtonText] = useState('click here!');

  const handleClick = () => {
    // 匹配初始值的感叹号
    const text = buttonText === 'click here!' ? 'clicked' : 'click here!';
    setButtonText(text);
  };

  return <button type="button" onClick={handleClick}>{buttonText}</button>;
};

export default Button;

2. 检查Webpack配置的核心要点 #

确认externals配置的完整性 #

确保externals针对不同模块规范（CommonJS、AMD、全局变量）正确排除React依赖，避免打包时重复引入React导致多实例冲突：

// Project-A的webpack.config.js
module.exports = {
  // ...其他配置
  externals: {
    react: {
      root: 'React',
      commonjs2: 'react',
      commonjs: 'react',
      amd: 'react'
    },
    'react-dom': {
      root: 'ReactDOM',
      commonjs2: 'react-dom',
      commonjs: 'react-dom',
      amd: 'react-dom'
    }
  }
};

配置output为UMD格式 #

为了让组件包在不同环境下被正确引用，需将libraryTarget设为umd：

// Project-A的webpack.config.js
const path = require('path');

module.exports = {
  // ...其他配置
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'umd',
    umdNamedDefine: true,
    globalObject: 'this' // 解决浏览器/Node环境全局变量冲突
  }
};

确认package.json入口指向正确 #

确保main字段指向打包后的输出文件，避免Project-B引入未编译的源码：

// Project-A的package.json
{
  "main": "./dist/index.js",
  "peerDependencies": {
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0"
  },
  // 可选：标记peer依赖为必需，避免安装时自动下载React
  "peerDependenciesMeta": {
    "react": { "optional": false },
    "react-dom": { "optional": false }
  }
}

3. 验证是否存在多React实例 #

在Project-B的代码中添加以下代码，检查是否加载了多个React实例：

console.log('Project-B React:', require('react'));
// 如果Project-A的node_modules中存在React，会打印另一个实例
console.log('Project-A React:', require('project-a/node_modules/react'));

如果输出为两个不同对象，说明Project-A的node_modules中意外安装了React，需删除该目录后重新打包。

4. 重新打包并测试 #

完成上述配置后，重新执行Project-A的打包命令：

npm run build && npm pack

然后在Project-B中重新安装包：

npm install ../path/Project-A.tgz

再次测试Button组件的点击事件。

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