1

我有一个创建反应应用程序，它通过自定义 cra 使用共享模块，我试图在这个公共模块中使用反应弹簧。

不幸的是，我收到了可怕的 Invalid Hook Call 通知：

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

我相信“重复”意味着我们没有从 react-video-js-player 中错误指定的依赖项中得到重复的反应，但也许我错了？

我已经检查了钩子的规则，我认为这个非常简单的组件并没有违反它们：

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-react-app 访问这个公共组件，我看不出它会如何从中获取一个 react 版本。

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/')
  })
);

我难住了。有什么建议么？提前致谢。

4

0 回答 0