Error when react-to-print used in Module Federation: Cannot read properties of null (reading 'useCallback') #3789
Description
Describe the bug
Hi guys,
I am using react-to-print in my app. It works fine running independently but when I export the module using module federation and use it in another app, the dependency fails saying:
Cannot read properties of null (reading 'useCallback')
I tried multiple versions of React and the package but the same issue. I do not know what else to do. Please, any help is appreciated.
React version: 18.3.1
Package version: 3.1.0
I have used other combinations, but the error is the same. This error is thrown on using the useReactToPrint hook.
index-CMK0NdhU.js:23136 ErrorBoundary caught an error: TypeError: Cannot read properties of null (reading 'useCallback')
at useCallback (__federation_shared_…C81lUd9V.js:1128:26)
at Module.f (__federation_expose_…G3OYG.js:43152:8057)
at CertificateGenerated (__federation_expose_…tkG3OYG.js:44211:14)
at renderWithHooks (__federation_shared_…imBFwfe.js:11552:22)
at mountIndeterminateComponent (__federation_shared_…imBFwfe.js:14928:17)
at beginWork (__federation_shared_…imBFwfe.js:15916:18)
at beginWork$1 (__federation_shared_…imBFwfe.js:19746:18)
at performUnitOfWork (__federation_shared_…imBFwfe.js:19191:16)
at workLoopSync (__federation_shared_…CimBFwfe.js:19130:9)
at renderRootSync (__federation_shared_…imBFwfe.js:19109:11)
{componentStack: '\n at CertificateGenerated (http://localhost:413…/127.0.0.1:3000/assets/index-CMK0NdhU.js:23125:5)'}
Error Component Stack
at ErrorBoundary (index-CMK0NdhU.js:23125:5)
I created a simple example to recreate the issue. I have two apps, the remote and root. Remote app exposes its App component for import by other apps. Root app imports the component.
Root app -> code -> deployed link
Remote app -> code -> deployed link
As you can see, the root component successfully prints using react-to-print, and so does the remote app when that is accessed directly, but if I load the remote component within the root component, I get an error on react-to-print about react being undefined:
index-DUwCgkeV.js:496 Uncaught TypeError: Cannot read properties of null (reading 'useCallback')
at react_production.useCallback (index-DUwCgkeV.js:496:34)
at Module.f (__federation_expose_RemoteComponent-B4_Wf0Ks.js:72:8056)
at App (__federation_expose_RemoteComponent-B4_Wf0Ks.js:89:30)
at renderWithHooks (index-Cec5-yzM.js:4352:22)
at updateFunctionComponent (index-Cec5-yzM.js:7089:16)
at beginWork (index-Cec5-yzM.js:8054:34)
at performUnitOfWork (index-Cec5-yzM.js:11705:15)
at workLoopSync (index-Cec5-yzM.js:11586:38)
at renderRootSync (index-Cec5-yzM.js:11567:8)
at performWorkOnRoot (index-Cec5-yzM.js:11172:41)
Reproduction
https://github.com/Mominadar/test-mf-root, https://github.com/Mominadar/test-mf-remote
Used Package Manager
npm
System Info
System:
OS: Linux 6.8 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
CPU: (22) x64 Intel(R) Core(TM) Ultra 7 155H
Memory: 6.79 GB / 15.16 GB
Container: Yes
Shell: 5.1.16 - /bin/bash
Binaries:
Node: 22.5.1 - ~/.nvm/versions/node/v22.5.1/bin/node
npm: 10.8.2 - ~/.nvm/versions/node/v22.5.1/bin/npm
Browsers:
Chrome: 131.0.6778.85Validations
- Read the docs.
- Read the common issues list.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- Make sure this is a Module federation issue and not a framework-specific issue.
- The provided reproduction is a minimal reproducible example of the bug.