Use react hook cause error in module federation project.

[akeyz]

Current Behavior

The project is module federation project.
When I add useEffect hook in remote app, the page report Cannot read properties of null (reading 'useEffect').

Expected Behavior

I download the example project, https://github.com/nrwl/react-module-federation, it works OK.

GitHub Repo

No response

Steps to Reproduce

1. create project with command npx create-nx-workspace@latest, choose react, webpack, playwright...
2. create host app follow this link, https://nx.dev/recipes/module-federation/create-a-host
3. create remote app follow this link, https://nx.dev/recipes/module-federation/create-a-remote
4. start the project with command npx nx serve shell --devRemotes=a,b
5. create react hook code in a remote app

Nx Report

NX   Report complete - copy this into the issue template

Node   : 18.20.2
OS     : darwin-arm64
npm    : 10.5.0

nx                 : 19.0.2
@nx/js             : 19.0.2
@nx/jest           : 19.0.2
@nx/linter         : 19.0.2
@nx/eslint         : 19.0.2
@nx/workspace      : 19.0.2
@nx/devkit         : 19.0.2
@nx/eslint-plugin  : 19.0.2
@nx/playwright     : 19.0.2
@nx/react          : 19.0.2
@nrwl/tao          : 19.0.2
@nx/web            : 19.0.2
@nx/webpack        : 19.0.2
typescript         : 5.4.5
---------------------------------------
Registered Plugins:
@nx/webpack/plugin
@nx/eslint/plugin
@nx/playwright/plugin
@nx/jest/plugin

Failure Logs

app.tsx:8 Warning: 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
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
printWarning	@	react.development.js:209
error	@	react.development.js:183
resolveDispatcher	@	react.development.js:1592
useEffect	@	react.development.js:1633
App	@	app.tsx:8
renderWithHooks	@	react-dom.development.js:16305
mountIndeterminateComponent	@	react-dom.development.js:20074
beginWork	@	react-dom.development.js:21587
callCallback	@	react-dom.development.js:4164
invokeGuardedCallbackDev	@	react-dom.development.js:4213
invokeGuardedCallback	@	react-dom.development.js:4277
beginWork$1	@	react-dom.development.js:27451
performUnitOfWork	@	react-dom.development.js:26557
workLoopSync	@	react-dom.development.js:26466
renderRootSync	@	react-dom.development.js:26434
performConcurrentWorkOnRoot	@	react-dom.development.js:25738
workLoop	@	scheduler.development.js:266
flushWork	@	scheduler.development.js:239
performWorkUntilDeadline	@	scheduler.development.js:533
Show less
react.development.js:1634 Uncaught TypeError: Cannot read properties of null (reading 'useEffect')
    at useEffect (react.development.js:1634:1)
    at App (app.tsx:8:12)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
useEffect	@	react.development.js:1634
App	@	app.tsx:8
renderWithHooks	@	react-dom.development.js:16305
mountIndeterminateComponent	@	react-dom.development.js:20074
beginWork	@	react-dom.development.js:21587
callCallback	@	react-dom.development.js:4164
invokeGuardedCallbackDev	@	react-dom.development.js:4213
invokeGuardedCallback	@	react-dom.development.js:4277
beginWork$1	@	react-dom.development.js:27451
performUnitOfWork	@	react-dom.development.js:26557
workLoopSync	@	react-dom.development.js:26466
renderRootSync	@	react-dom.development.js:26434
performConcurrentWorkOnRoot	@	react-dom.development.js:25738
workLoop	@	scheduler.development.js:266
flushWork	@	scheduler.development.js:239
performWorkUntilDeadline	@	scheduler.development.js:533
Show less

Package Manager Version

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

No response

[Coly010]

Hi! Could you please provide a repo with a minimal reproduction so that I can investigate this further?
This would help me determine exactly what it is that you're trying which is failing.

[akeyz]

Hi! Could you please provide a repo with a minimal reproduction so that I can investigate this further? This would help me determine exactly what it is that you're trying which is failing.

Thanks for reply.

Here is my repo url, https://github.com/akeyz/resource-visualization, please check.

[github-actions]

This issue has been automatically marked as stale because no reproduction was provided within 7 days.
Please help us help you. Providing a repository exhibiting the issue helps us diagnose and fix the issue.
Any time that we spend reproducing this issue is time taken away from addressing this issue and other issues.
This issue will be closed in 21 days if a reproduction is not provided.
If a reproduction has been provided, please reply to keep it active.
Thanks for being a part of the Nx community! 🙏