Uncaught TypeError: Cannot read properties of null (reading 'useEffect')

Question

Edit

So, what turned out to be the problem? I had two instances of React and ReactDOM contributing to the served bundle of applicationB. I was misled in diagnosing the problem-space and therefore the question(s)/appeal raised below is a little all-over-the-place. What should be taken away, in the hope it may help someone else in this position:

• The error Uncaught TypeError: Cannot read properties of null (reading 'useEffect') relates to there being two copies of React loaded into the output bundle of applicationB. But why are there two copies?

  • To start, applicationB is a Remix application. packageA is a React Component that makes use of esbuild in its build chain.
  • Through investigating, I discovered there was a discrepancy in the support Remix had for esbuild:
    • esbuild added support for the React 17 JSX Transform.
    • Remix was perhaps not aware of this update and coped with esbuild's lack of support for JSX Automatic Runtime by using a shim for the React import. This resulted in issues being raised:
      • Inability to consume external React Component Library in Remix project due to multiple copies of React error.
      • Inability to package React Component library with esbuild due to multiple copies of React error.
    • Remix recognised the fault with the shim and included a solution in release v1.7.0.

• In applicationB I was consuming all Remix dependencies as versioned ^1.4.1. I bumped them up to 1.7.0. All my troubles dissolved.

Background:

I am trying to test an npm package (packageA) I am developing locally. It is a React Component that manages an animation using gsap. I am consuming it in applicationB--itself is a Remix app,--through the use of npm link. However, I get the following error when trying to introduce packageA to applicationB:

// 1. warning logged to console
Uncaught TypeError: Cannot read properties of null (reading 'useEffect')
    at ki (react.development.js:1634:21)
    at Mk (PackageAComponent.tsx:26:3)
    at renderWithHooks (react-dom.development.js:16305:18)
    at mountIndeterminateComponent (react-dom.development.js:20074:13)
    at beginWork (react-dom.development.js:21587:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at beginWork$1 (react-dom.development.js:27451:7)
    at performUnitOfWork (react-dom.development.js:26560:12)

const PackageAComponent = (props: Props) => {

// 1. culprit line of failure
  useEffect(() => {
    ... stuff happening
  }, []);

  return (
    ...
  );
};

Relevant Notes

packageA output of "npm ls react react-dom"

• react@18.2.0
• react-dom@18.2.0

applicationB output of "npm ls react react-dom"

• react@18.2.0
• react-dom@18.2.0

I am unsure what other data would be relevant to provide and how best to troubleshoot this so that I may provide more helpful insights. Sorry team.