MuiComponents in Remote app cause Cannot read properties of null (reading 'useContext') error

[GDWhitehead]

Current Behavior

Steps to recreate..

• created a new nx workspace -npx create-nx-workspace@latest react-monorepo --preset=react-monorepo
• created a shell app - nx g @nx/react:host shell --directory=apps/react/shell
• created a remote app - nx g @nx/react:remote settings-app--directory=apps/react/settings-app
• Created a simple demo (see repo) to host the remote app inside the host app
  
• Updated module-federation.config.ts in the host and shell apps according to what I think is right from examples I've seen
• started everything up locally - nx serve shell --devRemotes=settings-app

Issue

• The small POC works fine if the remote app uses standard components (e.g. a standard button instead of an MUI Button in app.tsx)
• However, if I use any @mui/material component I get an error. The remote app runs fine when served standalone but hosted inside the shell app gives - TypeError: Cannot read properties of null (reading 'useContext'). The call stack can vary but the top of the stack is always Object.useContext.

I am new to using NX and mono repos, which is why I've posted the steps I'd taken just in case it stands out that I've missed a step or misunderstood the concept behind host and remote apps and perhaps not a bug?

The code in the repo has been stripped right back to show a simple example of the issue I'm stuck with.

Expected Behavior

I expected to see the remote app (settings-app) hosted inside the host page, which I do if I avoid using MUI components.

GitHub Repo

https://github.com/GDWhitehead/nx-monorepo-poc

Steps to Reproduce

1. navigate to the react-monorepo directory
2. run the command nx serve shell --devRemotes=settings-app
3. Visit http://localhost:4200/ (host shell app) and observe error
4. Visit http://localhost:4201/ (remote app) and see that it works standalone
5. Change app.tsx in the settings-app (remote app) and use a standard button instead of an MUI Button on line 8, Save changes
6. Revisit Visit http://localhost:4200/ and observe that the shell app now presents fine showing the button without error.

Nx Report

Node   : 20.13.1
OS     : win32-x64
pnpm   : 9.1.1

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

Failure Logs

No response

Package Manager Version

No response

Operating System

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

Additional Information

No response