Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[MaterialUI] Cannot read properties of null (reading 'useContext') #596

Open
nahimr opened this issue Apr 18, 2024 · 4 comments
Open

[MaterialUI] Cannot read properties of null (reading 'useContext') #596

nahimr opened this issue Apr 18, 2024 · 4 comments

Comments

@nahimr
Copy link

nahimr commented Apr 18, 2024

When calling useTheme hook from @mui/material, this throws an error.

image

Shared dependencies

On host side :

image

On remote side :

image

Versions

  • vite-plugin-federation: 1.3.5
  • vite: 5.2.8
  • @emotion/react: 11.11.4
  • @emotion/styled: 11.11.5
  • @mui/material: 5.15.15

Steps to reproduce

What is Expected?

It's expected to use correctly the hook useContext that its called by useTheme.

What is actually happening?

It's missing shared useContext reference of React.

Related to #595.

@Denrox
Copy link

Denrox commented Jun 4, 2024

Try adding to package.json following:
"resolutions": {
"react": "18.3.1"
},

Replace react version with yours

@mauri2008
Copy link

Hello nahimr, were you able to resolve this error?

@anshuman1490
Copy link

anshuman1490 commented Jul 11, 2024

I can fix this issue by adding these two dependencies in host and remote app-

      "@mui/x-data-grid-premium": {
        singleton: true,
        eager: true,
        requiredVersion: deps["@mui/x-data-grid-premium"],
      },
   
      "@emotion/styled": {
        singleton: true,
        eager: true,
        requiredVersion: deps["@emotion/styled"],
      },

Incase using ThemeProvider then wrap host app with ThemeProvider as well

@elyasaf755
Copy link

elyasaf755 commented Aug 9, 2024

I dont like it, but in a setup where both host and remote are Vite projects then adding "@emotion/styled" and "@mui/material" as shared in both host and remote fixed the problem for me:
federation({
name: 'remote', // name of the fed group...
filename: 'remoteEntry.js', // default file name

    // Modules to expose
    exposes: {
      './Remote': './src/Remote',
    },
    shared: ['react', 'react-dom', "@emotion/styled", "@mui/material"] // <--- these deps
  }),

When host is Webpack and remote is Vite, removing the node_modules + package-lock, and changing the @mui/material version to be strictly 5.15.4 did the job. i.e., in package.json, update the dependency to this: "@mui/material": "5.15.4",

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants