NX nrwl 19 seems to be causing issues with other packages, e.g. GrommetJS

[Aubrey-Russell]

Current Behavior

nx nrwl seems to be causing issues with other packages like react 18.3.1 and grommet JS. React 18.3.1 and grommet JS work on their own just fine without nx nrwl. Older versions of nx do not have this issue. Only federated modules through nx seem to trigger this issue.

no issue at all when running in standalone mode for the app

Expected Behavior

Should work with other packages

GitHub Repo

https://github.com/Aubrey-Russell/grommet-react-mfe-issue-example

Steps to Reproduce

1.npm install -g pnpm

2. pnpm install
3. pnpm nx serve shell

Nx Report

Node   : 21.1.0
OS     : win32-x64
pnpm   : 9.1.0

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

Failure Logs

react.development.js:209 
 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.
react.development.js:1622 
 Uncaught TypeError: Cannot read properties of null (reading 'useState')
    at useState (react.development.js:1622:1)
    at Grommet.js:53:27
    at renderWithHooks (react-dom.development.js:15486:1)
    at updateForwardRef (react-dom.development.js:19245:1)
    at beginWork (react-dom.development.js:21675: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:27490:1)
    at performUnitOfWork (react-dom.development.js:26596:1)
2
react.development.js:209 
 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.
react.development.js:1622 
 Uncaught TypeError: Cannot read properties of null (reading 'useState')
    at useState (react.development.js:1622:1)
    at Grommet.js:53:27
    at renderWithHooks (react-dom.development.js:15486:1)
    at updateForwardRef (react-dom.development.js:19245:1)
    at beginWork (react-dom.development.js:21675: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:27490:1)
    at performUnitOfWork (react-dom.development.js:26596:1)
react-dom.development.js:18704 
 The above error occurred in the <Grommet> component:

    at http://localhost:9777/vendors-node_modules_pnpm_grommet-theme-hpe_5_4_0_grommet-icons_4_12_1_react-dom_18_3_1_react-4b41ef.js:4400:24
    at App
    at RenderedRoute (http://localhost:4200/vendors-node_modules_pnpm_grommet_2_37_0_react-dom_18_3_1_react_18_3_1__react_18_3_1_styled-c-f24b1e.js:43150:5)
    at Routes (http://localhost:4200/vendors-node_modules_pnpm_grommet_2_37_0_react-dom_18_3_1_react_18_3_1__react_18_3_1_styled-c-f24b1e.js:43741:5)
    at Suspense
    at div
    at P (http://localhost:4200/vendors-node_modules_pnpm_grommet_2_37_0_react-dom_18_3_1_react_18_3_1__react_18_3_1_styled-c-f24b1e.js:48840:19574)
    at AnalyticsProvider (http://localhost:4200/vendors-node_modules_pnpm_grommet_2_37_0_react-dom_18_3_1_react_18_3_1__react_18_3_1_styled-c-f24b1e.js:6404:26)
    at http://localhost:4200/vendors-node_modules_pnpm_grommet_2_37_0_react-dom_18_3_1_react_18_3_1__react_18_3_1_styled-c-f24b1e.js:6054:24
    at App
    at Router (http://localhost:4200/vendors-node_modules_pnpm_grommet_2_37_0_react-dom_18_3_1_react_18_3_1__react_18_3_1_styled-c-f24b1e.js:43673:15)
    at BrowserRouter (http://localhost:4200/vendors-node_modules_pnpm_grommet_2_37_0_react-dom_18_3_1_react_18_3_1__react_18_3_1_styled-c-f24b1e.js:41789:5)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
react-dom.development.js:26962 
 Uncaught TypeError: Cannot read properties of null (reading 'useState')
    at useState (react.development.js:1622:1)
    at Grommet.js:53:27
    at renderWithHooks (react-dom.development.js:15486:1)
    at updateForwardRef (react-dom.development.js:19245:1)
    at beginWork (react-dom.development.js:21675:1)
    at beginWork$1 (react-dom.development.js:27465:1)
    at performUnitOfWork (react-dom.development.js:26596:1)
    at workLoopSync (react-dom.development.js:26505:1)
    at renderRootSync (react-dom.development.js:26473:1)
    at recoverFromConcurrentError (react-dom.development.js:25889:1)

Package Manager Version

No response

Operating System

• [ ] macOS
• [ ] Linux
• [X] Windows
• [ ] Other (Please specify)

Additional Information

No response

[Aubrey-Russell]

I can confirm this is still broken on 19.04 and the 19.1.0 beta

[Aubrey-Russell]

I can Confirm this doesn't work on 19.0.6

[Aubrey-Russell]

Checking whether this still fails on the latest nx 19.1.1