Блог

Я пытаюсь создать библиотеку компонентов React.

Код работает нормально в проекте библиотеки компонентов, но как только я устанавливаю пакет, конкретный компонент не работает и выдает следующее сообщение об ошибке.

 index.js:1 Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
 

Я использую "react": "16.9.0" и "react-dom": "16.9.0" в своей библиотеке компонентов, и в приложении, в которое я его установил.

Компонент выглядит так, это не очень сложно, поэтому все, о чем я могу думать, это то, что связано с функцией setTimeout. Что может вызвать ошибку из-за примера в документации вызова из другой функции. Я пытался обернуть в useCallback, но это не сработало, у кого-нибудь есть какие-нибудь идеи?

https://reactjs.org/warnings/invalid-hook-call-warning.html

 import React, { useEffect, useState } from 'react';
import MuteOn from '../../../static/images/icons/btn-mute-on.svg';

const AttendeesMuted = () => {
  const [showWarning, setShowWarning] = useState(true);

  useEffect(() => {
    window.setTimeout(() => setShowWarning(false), 3000);
  }, []);

  if (showWarning) {
    return (
      <div className='sg_attendees_muted'>
        <p>
          Please note, you have joined this conference muted, to unmute press
          the <img src={MuteOn} alt='muteBtnImg' /> button
        </p>
      </div>
    );
  } else {
    return null;
  }
};

export default AttendeesMuted;
 

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

** ОБНОВЛЕНИЕ **

Я попробовал предложение о добавлении react во внешние компоненты библиотеки компонентов React.

 externals: {
    'react': 'react',
  },
 

Однако, когда я затем загружаю компонент, я получаю эту ошибку ReferenceError: require is not defined

Это зависит от того, как вы используете библиотеку в своем приложении react. Если вы определяете React во внешних приложениях, публикуете его в реестре, а затем устанавливаете в свое приложение, у него вообще не должно возникнуть проблем, но если вы устанавливаете его по ссылке npm, то, скорее всего, столкнулись две версии React. Одно из решений для этого состоит в том, чтобы установить React в библиотеку из вашего приложения, используя file:../your app/node_modules/... или другое-использовать монорепо с lerna пакетами или yarn workspaces там, где пакеты поднимаются наверх.