Question

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

虽然可以从create-react-app开箱即用地测试通用项目中的库，但可以导入和实现不使用React Hooks制作的组件，但是一旦我们使用了Hooks制作的组件-无效挂机呼叫错误显示：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"
    },
    "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"
    ],
}

UI工具包的webpack.config.js

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'],
    },
    devtool: false,
};

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

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;

Answer 1

查看webpack的配置，我发现UI工具包与包含的react捆绑在一起，这可能是导致问题的原因。

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

https://webpack.js.org/configuration/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

希望这会有所帮助！

从自定义的React Component Library中导入和使用组件会导致不变违规：无效的挂钩调用

1 个答案: