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

[nahimr]

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

Shared dependencies

On host side :

On remote side :

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]

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

Replace react version with yours

[mauri2008]

Hello nahimr, were you able to resolve this error?

[anshuman1490]

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]

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",