从自定义 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.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

};

我已经发布了一个测试包来确认这一点（react-ui-kit-dontuse）。

演示链接

v0.0.21(Without webpack externals) 

https://stackblitz.com/edit/react-xyjgep

v0.0.23(With webpack externals) 

https://stackblitz.com/edit/react-ihnmrl

测试包源码：https : //github.com/nithinthampi/react-ui-lib-test

希望这可以帮助！