Invalid Hook Call in shared module using react-spring

Question

I have a create react app that uses a shared module via customize-cra and I am attempting to use react-spring within this common module.

I am unfortunately getting the dreaded Invalid Hook Call notification:

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

From the common component I have

$ 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)

And from the app I have:

$ 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

I believe the 'deduped' means we are not getting a duplicate react from the incorrectly specified dependency in react-video-js-player, but maybe I am wrong?

I have checked the rules of hooks and I don't think I am violating them with this very simple component:

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

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

Our config-overides.js does the following to give access to this common component from the create-react-app, which I cannot see how it would pickup a version of react from that.

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

I am stumped. Any suggestions? Thanks in advance.

Invalid Hook Call in shared module using react-spring

0 Answers0