Импорт и использование компонента из пользовательской библиотеки компонентов React приводит к нарушению инварианта: недопустимый вызов ловушки

Question

Моя работа заключается в создании библиотеки React UI Kit / Component для внутреннего использования для наших продуктов. Все работает нормально при разработке и отображении в Storybook.

При тестировании библиотеки в стандартном проекте из коробки с create-реагировать на приложение, импорт и реализация компонентов, созданных без React 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 ибольше ничего ... Так что не похоже, что у нас есть несколько React'ов?

Любая помощь будет принята с благодарностью !!

Это package.json

* 1017 комплекта пользовательского интерфейса*

Комплект пользовательского интерфейса 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

Глядя на конфигурацию веб-пакета, я мог видеть, что в комплект пользовательского интерфейса входит react, что может быть причиной проблемы.

Чтобы избежать этого, вы можете использовать внешние веб-пакеты.

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

Я опубликовал тестовый пакет для подтверждения этого ( реаги-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

Надеюсь, это поможет!