MuiComponents in Remote app cause Cannot read properties of null (reading 'useContext') error
GDWhitehead opened this issue · 0 comments
GDWhitehead commented
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
- navigate to the react-monorepo directory
- run the command nx serve shell --devRemotes=settings-app
- Visit http://localhost:4200/ (host shell app) and observe error
- Visit http://localhost:4201/ (remote app) and see that it works standalone
- Change app.tsx in the settings-app (remote app) and use a standard button instead of an MUI Button on line 8, Save changes
- 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