Context from Material ui theme provider doesn't shared for remote app

[skogeo]

Current Behavior

Hi! I experienced issue when theme provider doesn't work for remote and for material ui in remote it get just default theme. Could you please tell me what I did wrong?

shell app
module.federation.config

// Core libraries such as react, angular, redux, ngrx, etc. must be
// singletons. Otherwise the applications will not work together.
const coreLibraries = new Set(['react','react-dom','react-router-dom','@mui/material']);

module.exports = {
    name: 'shell',
    remotes: ['remote'],
    shared: (libraryName, defaultConfig) => {
        if (coreLibraries.has(libraryName)) {
            return defaultConfig;
        }
        // Returning false means the library is not shared.
        return false;
    },
};

webpack config

const { composePlugins, withNx } = require('@nrwl/webpack');
const { withReact } = require('@nrwl/react');
const { withModuleFederation } = require('@nrwl/react/module-federation');

const baseConfig = require('./module-federation.config');

const config = {
  ...baseConfig,
};

// Nx plugins for webpack to build config object from Nx options and context.
module.exports = composePlugins(withNx(), withReact(), withModuleFederation(config));

app.tsx

import * as React from 'react';
import { Link, Route, Routes } from 'react-router-dom';
import createTheme from '@mui/material/styles/createTheme';
import MUIThemeProvider from '@mui/material/styles/ThemeProvider';
import { red } from '@mui/material/colors';


const theme = createTheme({
  palette: {
    primary: {
      main: red[500],
    },
  },
});


 const Remote = React.lazy(() => import('remote/Module'));
 

export function App() {
  return (
    <MUIThemeProvider theme={theme}>
      <React.Suspense fallback={null}>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/remote">Remote</Link></li>
      </ul>
      <Routes>
          <Route path="/remote" element={<Remote/>} />
      </Routes>
      </React.Suspense>
    </MUIThemeProvider>
  );
}

export default App;

Remote

module federation config

const coreLibraries = new Set(['react','react-dom','react-router-dom','@mui/material']);
module.exports = {
    name: 'remote',
    exposes: {
        './Module': './src/remote-entry.ts',
    },
    shared: (libraryName, defaultConfig) => {
        if (coreLibraries.has(libraryName)) {
            return defaultConfig;
        }
        // Returning false means the library is not shared.
        return false;
    },
};

app.tsx

import { Button } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import { Fragment, useEffect, useState } from 'react';



export function App() {
  const theme = useTheme()
  const [divStyles, setDivStyles] = useState({ 
    height: '40px', 
    width: '40px', 
    backgroundColor: theme.palette.primary.main
  })
  useEffect(() => {
    console.log(theme)
    setDivStyles(state => ({
      ...state,
      backgroundColor: theme.palette.primary.main
    }))
  }, [theme.palette.primary.main])
  
  return (
    <Fragment>
    <Button color="primary">REMOTE</Button>
      <div style={divStyles} />
    </Fragment>
  );

}


export default App;

Expected Behavior

I expect that context from the shell app will be shared between it remotes, but it doesn't work.

GitHub Repo

https://github.com/toadirog/nx-mui-theme-issue

Steps to Reproduce

1. use mui theme provider in shell
2. add mui component in remote
3. check that theme doesn't work

Nx Report

Node : 19.3.0
   OS   : darwin arm64
   npm  : 9.2.0

   nx                      : 15.8.7
   @nrwl/js                : 15.8.7
   @nrwl/jest              : 15.8.7
   @nrwl/linter            : 15.8.7
   @nrwl/workspace         : 15.8.7
   @nrwl/cli               : 15.8.7
   @nrwl/cypress           : 15.8.7
   @nrwl/devkit            : 15.8.7
   @nrwl/eslint-plugin-nx  : 15.8.7
   @nrwl/react             : 15.8.7
   @nrwl/rollup            : 15.8.7
   @nrwl/tao               : 15.8.7
   @nrwl/vite              : 15.8.7
   @nrwl/web               : 15.8.7
   @nrwl/webpack           : 15.8.7
   @nrwl/nx-cloud          : 15.2.3
   typescript              : 4.9.5

Failure Logs

No response

Additional Information

No response

[barrymichaeldoyle]

Could you see if it is working in version 15.8.6? We're having similar issues since we upgraded from 15.8.5, I've tried all versions since then and it looks like 15.8.7-9 doesn't work but <=15.8.6 is working fine.

Obviously we would want to find a solution to this thought as we'd like to stay up-to-date with latest nx versions.

In our case we're using Chakra and the project is actually crashing because it assumes that the context will be defined, when it is not.

[skogeo]

@barrymichaeldoyle Thank you! I will check it.

[barrymichaeldoyle]

@toadirog I can confirm that the latest beta version of nx is working now :) Just waiting for the next stable release before I upgrade nx myself :)

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.