从自定义 React 组件库导入和使用组件会导致 Invariant Violation:

Question

我的工作是制作一个 React UI 工具包/组件库，供我们产品内部使用。在 Storybook 上开发和显示时一切正常。

在从 create-react-app 开箱即用的通用项目中测试库时，导入和实现没有 React Hooks 的组件是没问题的，但是一旦我们使用 Hooks 制作的组件 - Invalid Hook Call 错误显示：https : //reactjs.org/warnings/invalid-hook-call-warning.html

已经尝试了那里列出的所有内容（并阅读并尝试了页面上链接的 github 线程解决方案），并且该组件只是简单地使用useRef()，没有其他任何东西，所以我们知道没有违反任何规则，React 和 React-dom 版本是最新的，并且正在运行npm ls react和npm ls react-dom在项目成果react@16.10.2和react-dom@16.10.2并没有别的...所以看起来我们有多个阵营的不？

任何帮助将非常感激！！

这是 UI 套件的 package.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"

    },

  

Answer 1

查看 webpack 配置，我可以看到，UI 工具包与react包含的内容捆绑在一起，这可能会导致问题。为了避免这种情况，您可以使用 webpack externals。https://webpack.js.org/configuration/externals/externals 配置选项提供了一种从输出包中排除依赖项的方法。相反，创建的包依赖于存在于消费者环境中的依赖关系。此功能通常对库开发人员最有用，但是它有多种应用程序。因此，您可以将 UI Kit webpack 配置更新为不包含react，并且 peerDependencies 应该负责库的任何使用者的依赖项处理。更新了 webpack.configconst path = require("path");module.exports = {&nbsp; mode: "production",&nbsp; entry: "./src/index.js",&nbsp; output: {&nbsp; &nbsp; path: path.resolve("dist"),&nbsp; &nbsp; filename: "index.js",&nbsp; &nbsp; libraryTarget: "commonjs2"&nbsp; },&nbsp; module: {&nbsp; &nbsp; rules: [&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; test: /\.jsx?$/,&nbsp; &nbsp; &nbsp; &nbsp; exclude: /(node_modules)/,&nbsp; &nbsp; &nbsp; &nbsp; use: "babel-loader"&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; test: /\.(eot|svg|ttf|woff|woff2|otf)$/,&nbsp; &nbsp; &nbsp; &nbsp; use: [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; loader: "file-loader",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; options: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: "[name].[ext]",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; limit: 10000,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mimetype: "application/font-woff"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ]&nbsp; },&nbsp; resolve: {&nbsp; &nbsp; alias: {&nbsp; &nbsp; &nbsp; components: path.resolve(__dirname, "src/components/"),&nbsp; &nbsp; &nbsp; utils: path.resolve(__dirname, "src/utils/"),&nbsp; &nbsp; &nbsp; themes: path.resolve(__dirname, "src/themes/")&nbsp; &nbsp; },&nbsp; &nbsp; extensions: [".js", ".jsx"]&nbsp; },&nbsp; externals: {&nbsp; &nbsp; &nbsp; &nbsp; // Use external version of React&nbsp; &nbsp; &nbsp; &nbsp; react: "react"&nbsp;},&nbsp; devtool: false};我已经发布了一个测试包来确认这一点（react-ui-kit-dontuse）。演示链接v0.0.21(Without webpack externals)&nbsp;https://stackblitz.com/edit/react-xyjgepv0.0.23(With webpack externals)&nbsp;https://stackblitz.com/edit/react-ihnmrl测试包源码：https : //github.com/nithinthampi/react-ui-lib-test希望这可以帮助！