Javascript 从自定义React组件库导入和使用组件会导致不变冲突：无效的钩子调用

我的工作是制作一个React UI工具包/组件库，用于我们的产品内部。在开发和展示故事书的过程中，一切正常

在create react app的一个通用项目中测试库时，导入和实现没有react挂钩的组件是可以的，但一旦我们使用了用挂钩制作的组件，无效挂钩调用错误就会显示：

我们已经尝试了这里列出的所有内容（并阅读并尝试了页面上链接的github线程解决方案），组件只使用了

useRef（）

，没有其他内容，因此我们知道没有违反任何规则，React和React dom版本是最新的，在项目中运行

npm ls react

和

npm ls react dom

会导致

react@16.10.2

和

反应-dom@16.10.2

除此之外。。。看来我们没有多重反应

任何帮助都将不胜感激

这是UI工具包的

包.json

{
    "name": "react-ui-kit",
    "version": "0.0.15",
    "description": "UI Kit",
    "main": "dist/index",
    "module": "dist/index",
    "typings": "dist/index",
    "jest": {
        "setupFilesAfterEnv": [
            "<rootDir>/setupTests.js"
        ],
        "coverageReporters": [
            "json-summary",
            "text",
            "lcov"
        ]
    },
    "scripts": {
        "test": "jest --coverage",
        "test:badges": "npm run test && jest-coverage-badges input './coverage/coverage-summary.json' output './badges'",
        "test-update": "jest --updateSnapshot",
        "lint:css": "stylelint './src/**/*.js'",
        "storybook": "start-storybook -p 6006",
        "build-storybook": "build-storybook -c .storybook -o .out",
        "generate": "plop --plopfile ./.plop/plop.config.js",
        "build": "webpack --mode production",
        "prepare": "npm run build",
        "prepublishOnly": "npm run test:badges",
        "storybook-docs": "build-storybook --docs",
        "todo": "leasot './src/**/*.js'",
        "todo-ci": "leasot -x --reporter markdown './src/**/*.js' > TODO.md"
    },
    "license": "ISC",
    "peerDependencies": {
        "prop-types": "^15.7.2",
        "react": "^16.9.0",
        "react-dom": "^16.9.0",
        "recharts": "^1.7.1",
        "styled-components": "^4.3.2",
        "styled-normalize": "^8.0.6"
    },
    "devDependencies": {
        "@babel/cli": "^7.6.0",
        "@babel/core": "^7.6.0",
        "@babel/plugin-proposal-class-properties": "^7.5.5",
        "@babel/preset-env": "^7.6.0",
        "@babel/preset-react": "^7.0.0",
        "@storybook/addon-actions": "^5.2.1",
        "@storybook/addon-docs": "^5.2.1",
        "@storybook/addon-info": "^5.2.1",
        "@storybook/addon-knobs": "^5.2.1",
        "@storybook/addon-links": "^5.2.1",
        "@storybook/addon-viewport": "^5.2.1",
        "@storybook/addons": "^5.2.1",
        "@storybook/react": "^5.2.1",
        "babel-eslint": "^10.0.3",
        "babel-jest": "^24.9.0",
        "babel-loader": "^8.0.6",
        "babel-plugin-styled-components": "^1.10.6",
        "eslint": "^6.5.1",
        "eslint-plugin-react": "^7.15.0",
        "eslint-plugin-react-hooks": "^2.1.1",
        "jest": "^24.9.0",
        "jest-coverage-badges": "^1.1.2",
        "jest-styled-components": "^6.3.3",
        "leasot": "^8.2.0",
        "plop": "^2.4.0",
        "polished": "^3.4.1",
        "prop-types": "^15.7.2",
        "react": "^16.9.0",
        "react-dom": "^16.9.0",
        "react-test-renderer": "^16.9.0",
        "recharts": "^1.7.1",
        "storybook-styled-components": "github:merishas/storybook-styled-components",
        "styled-components": "^4.4.0",
        "styled-normalize": "^8.0.6",
        "stylelint": "^10.1.0",
        "stylelint-config-recommended": "^2.2.0",
        "stylelint-config-styled-components": "^0.1.1",
        "stylelint-processor-styled-components": "^1.8.0",
        "webpack": "^4.40.2",
        "webpack-cli": "^3.3.9"
    },
    "files": [
        "dist"
    ],
}

如何在项目中导入和实现组件：

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import { FieldLabel, Button } from "react-ui-kit";

function App() {
  return (
    <div className="App">
      <FieldLabel>THIS IS THE ONE USING the useRef Hook</FieldLabel>
      <Button>This component is totally fine without FieldLabel, this isn't using Hooks</Button>
    </div>
  );
}

export default App;

从“React”导入React；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“react ui kit”导入{FieldLabel，Button}；
函数App（）{
返回(
这是一个使用useRef钩子的
这个组件在没有FieldLabel的情况下非常好，它没有使用钩子
);
}
导出默认应用程序；

查看网页包配置，我可以看到，UI工具包与包含的

react

捆绑在一起，这可能是导致问题的原因

为了避免这种情况，您可以使用webpack外部

externals配置选项提供了一种排除 来自输出包的依赖项。相反，创建的包 依赖于消费者环境中存在的依赖关系。 但是，此功能通常对库开发人员最有用 它有多种应用

因此，您可以更新UI Kit网页包配置，使其不包含

react

，并且peerDependencies应该负责库的任何使用者的依赖关系处理

更新的webpack.config

const path = require("path");
module.exports = {
  mode: "production",
  entry: "./src/index.js",
  output: {
    path: path.resolve("dist"),
    filename: "index.js",
    libraryTarget: "commonjs2"
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        use: "babel-loader"
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2|otf)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name].[ext]",
              limit: 10000,
              mimetype: "application/font-woff"
            }
          }
        ]
      }
    ]
  },
  resolve: {
    alias: {
      components: path.resolve(__dirname, "src/components/"),
      utils: path.resolve(__dirname, "src/utils/"),
      themes: path.resolve(__dirname, "src/themes/")
    },
    extensions: [".js", ".jsx"]
  },
  externals: {
        // Use external version of React
        react: "react"
 },
  devtool: false
};

我已经发布了一个测试包来确认这一点（）

演示链接

v0.0.21(Without webpack externals) 

测试包的源代码：

---

希望这有帮助

您正在使用npm链接吗？您的项目在

react@16.10.2

并且lib在

16.9.0

上运行。如果您使用的是

npm-link

，这将导致错误，因为捆绑程序将看到两个react版本。不，我们没有使用

npm-link

，我们的库是在npm上私下发布的，因此我们从那里安装库。快速解决方案是在您的项目中使用react版本

16.9.0

。因为您的UI kit对React 16.9.0具有对等依赖性，您也可以重新发布UI kit包，因为React版本被指定为^16.9.0，这可能会将UI kit React版本更新为16.10.2。欢迎您！！！如果有帮助，请标记为正确答案/向上投票：）

v0.0.21(Without webpack externals) 

v0.0.23(With webpack externals)