自定义React组件npm包导出异常 引入后触发Hook无效调用错误

问题根源 #

你的报错是组件库构建产物内置了独立的React副本，和业务项目使用的React实例不共通，触发了React Hooks的实例唯一性校验。移除useState后不需要调用React Hooks，自然不会触发校验规则，所以可以正常运行。

修复步骤 #

1. 调整组件库依赖声明 #

将react、react-dom从组件库的dependencies移到peerDependencies，仅保留在devDependencies用于本地开发：

// 组件库package.json
{
  "peerDependencies": {
    "react": "^17.0.0 || ^18.0.0",
    "react-dom": "^17.0.0 || ^18.0.0"
  },
  "devDependencies": {
    // 这里保留你本地开发需要的react/react-dom版本
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

2. 配置webpack外部依赖 #

修改组件库的webpack配置，将react、react-dom标记为外部依赖，不打包进最终产物：

// 组件库webpack.config.js
const path = require("path");
module.exports = {
  // 保留你原有配置不变，新增externals字段
  externals: {
    react: {
      commonjs: "react",
      commonjs2: "react",
      amd: "react",
      root: "React"
    },
    "react-dom": {
      commonjs: "react-dom",
      commonjs2: "react-dom",
      amd: "react-dom",
      root: "ReactDOM"
    }
  },
  // 原有其他配置保持不变
  entry: "./src/index.ts",
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "babel-loader",
        exclude: /node_modules/
      },
    ]
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
    alias: {
      "@": path.resolve(__dirname, "src")
    }
  },
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
    libraryTarget: "umd",
    library: "my-library"
  }
};

3. 本地调试兼容（可选） #

如果本地调试依然存在冲突，可在业务项目的webpack配置中添加alias，固定React的加载路径：

// 业务项目webpack配置
resolve: {
  alias: {
    "react": path.resolve(__dirname, "./node_modules/react"),
    "react-dom": path.resolve(__dirname, "./node_modules/react-dom")
  }
}

4. 重新生效配置 #

• 重新运行组件库的npm run dev构建产物
• 业务项目重新安装组件库依赖后重启项目即可

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