Invalid Hook Call в общем модуле с использованием реактивной пружины - PullRequest
0 голосов
/ 14 октября 2019

У меня есть приложение для создания реакции, которое использует общий модуль через customize-cra, и я пытаюсь использовать реактивную пружину в этом общем модуле.

Я, к сожалению, получаю страшное уведомление о недопустимом вызове перехвата:

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

Из общего компонента, который у меня есть

$ npm ls react
common@1.0.0 /path/to/web/common
└── (empty)
$ npm ls react-dom
common@1.0.0 /path/to/web/common
└── (empty)

И из приложения, которое у меня есть:

$ npm ls react
app@0.1.0 /path/to/web/app
├── react@16.10.1
└─┬ react-video-js-player@1.1.1
  └── react@16.10.1  deduped
$ npm ls react-dom
app@0.1.0 /path/to/web/app
└── react-dom@16.10.1

Я считаю, что «дедуплицированный» означает, что мы не получаемдвойной ответ от неправильно заданной зависимости в response-video-js-player, но, может быть, я ошибаюсь?

Я проверил правила хуков и не думаю, что нарушаю их с помощью этого очень простогоcomponent:

const FullScreenZoom = ({ children }) => {
  rootSpring = useSpring(rootStyle);
  contentSpring = useSpring(contentStyle);

  return (
    <animated.div style={rootSpring}>
      <div style={contentSpring}>
        {children}
      </div>
    </animated.div>
  );
};

Наш config-overides.js делает следующее, чтобы предоставить доступ к этому общему компоненту из приложения create-реакции-приложения, которое я не могу понять, как оно получило бы версию реакции из этого.

const { override, babelInclude, addWebpackAlias, removeModuleScopePlugin } = require('customize-cra');
const path = require('path');

module.exports = override(
  removeModuleScopePlugin(),
  babelInclude([path.resolve('src'), path.resolve(__dirname, '../common/src/')]),
  addWebpackAlias({
    common: path.resolve(__dirname, '../common/src/')
  })
);

Я в тупике. Какие-либо предложения? Заранее спасибо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...