Как повторно использовать библиотеку React с хуками

Question

Я пишу свою собственную библиотеку, чтобы помочь создавать формы с помощью React.

Цель состоит в том, чтобы иметь возможность повторно использовать его в любом приложении React (сделанном с нуля, с create-Reaction-app , nextjs , прочее?)

Моя проблема в том, что я не могу понять, как его использовать.

Вот первая проблема, с которой я столкнулся, когда попытался повторно использовать свою библиотеку в другом проекте:

Недопустимое предупреждение о вызове крюка

Реакт говорит, что причина может быть одной из следующих:

1. У вас могут быть несовпадающие версии React и React DOM.
2. Возможно, вы нарушаете Правила Крюков.
3. В одном приложении может быть несколько копий React.

После расследования я исключил пункты 1. и 2.

Я сначала использовал Parcel для создания своей библиотеки, но мне нужно было исключить React из пакета для решения 3.

Именно поэтому я переключился на Webpack и переместил зависимость React в peerDependencies + devDependencies.

Я пробовал разные конфигурации веб-пакетов:

const config: webpack.Configuration = {
  ...
  externals: {
    react: 'React'
  }
}

->, что приводит к следующей ошибке в приложении-потребителе:

Реакция не определена

const config: webpack.Configuration = {
  ...
  externals: {
    react: {
      root: 'React',
      amd: 'react',
      commonjs: 'react',
      commonjs2: 'react',
      umd: 'react',
    }
  }
}

-> что приводит к следующей ошибке:

Невозможно прочитать свойство 'createContext' из неопределенного

Я пытался использовать свою библиотеку с ссылкой npm, а также опубликовал ее на npm, но результат тот же.

Шаг для воспроизведения:

1. Установите @mlaopane/formhook в своем приложении реакции (npm i @mlaopane/formhook или yarn add @mlaopane/formhook)
2. Попробуйте использовать компонент, например

import { Form } from '@mlaopane/formhook'

export default function App() {
  return <Form />
}

3. Вы должны увидеть ошибку в консоли

Спасибо, что помогли мне с этим:)

NB. Это моя первая проблема, пожалуйста, скажите, нужна ли дополнительная информация.

Answer 1

Я наконец-то нашел решение, вдохновленное create-реагировать-библиотекой .

Похоже, Rollup является лучшим кандидатом для объединения React библиотек.

Даже если я по-прежнему не могу связать свою библиотеку локально, ее можно использовать при публикации.