CacheProvider ignored in UMD build

[beuluis]

Steps to reproduce

Link to live example: https://github.com/beuluis/MUI-Shadow-DOM-CacheProvider-Broken-Theme

Steps:

1. Clone repo
2. Build app using npm start it is important to actually build it otherwise vite runs in dev mode and all works fine

Current behavior

MUI does not use the provided shadowContainer to mount styles into.

Expected behavior

MUI should mount styles in the specified shadowContainer inside the shadow DOM context.

Context

I am trying to archive a reusable web-component build (Web-components was excluded from the example to boil it down) with external resources to contra balance the payload size.

Maybe helpful:
When removing @mui/material from the externals and bundle it within, everything works as aspected. This leads me to believe that the UMD build may be broken.

Your environment

npx @mui/envinfo

  System:
    OS: macOS 14.2
  Binaries:
    Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node
    Yarn: 1.22.21 - /opt/homebrew/bin/yarn
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.1/bin/npm
  Browsers:
    Chrome: 120.0.6099.199
    Edge: Not Found
    Safari: 17.2
  npmPackages:
    @emotion/react: ^11.11.3 => 11.11.3
    @emotion/styled: ^11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.30
    @mui/core-downloads-tracker:  5.15.3
    @mui/material: ^5.15.3 => 5.15.3
    @mui/private-theming:  5.15.3
    @mui/styled-engine:  5.15.3
    @mui/system:  5.15.3
    @mui/types:  7.2.12
    @mui/utils:  5.15.3
    @types/react: ^18.2.47 => 18.2.47
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    typescript: ^5.3.3 => 5.3.3

Used UMD builds

https://unpkg.com/[email protected]/umd/react.production.min.js
https://unpkg.com/[email protected]/umd/react-dom.production.min.js
https://unpkg.com/@emotion/[email protected]/dist/emotion-react.umd.min.js
https://unpkg.com/@emotion/[email protected]/dist/emotion-styled.umd.min.js
https://unpkg.com/@mui/[email protected]/umd/material-ui.production.min.js

Search keywords: umd emotion CacheProvider

[siriwatknp]

I guess this is specific to emotion?

[beuluis]

Dont know since it works when i bundle MUI inside. So emotion seems to work.

You can try it out when you remove mui from the peerDeps and build again. Then all works since vite is not bundeling mui as external.

Because auf this I assumed it could be a problem with the UMD build but i am not 100% sure and also not sure how I could boil it down more to identify the source of the issue.

[beuluis]

I posted it to emotion as well: emotion-js/emotion#3147

[beuluis]

I found a related issue: #29568

[oliviertassinari]

This looks normal, the UMD is meant to play with the API, it bundles everything so the Emotion React cache is duplicated, so the context value doesn't propagate.

I'm closing, see #40960, we are removing the UMD bundle.

[beuluis]

Ok for everyone who finds this and want to find a solution. I found something that worked:

I bundle my resources now on my own and push them to s3.

For that you can use rollup with something like:

import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import replace from '@rollup/plugin-replace';
import terser from '@rollup/plugin-terser';

const dependencies= [
          {
              name: 'React',
              input: 'node_modules/react/index.js',
              outputName: 'react.umd.js',
              format: 'umd',
              globals: {},
          },
          {
              name: 'ReactDOM',
              input: 'node_modules/react-dom/index.js',
              outputName: 'react-dom.umd.js',
              format: 'umd',
              globals: {
                  react: 'React',
              },
          },
          {
              name: 'emotionReact',
              input: 'node_modules/@emotion/react/dist/emotion-react.browser.esm.js',
              outputName: 'emotion-react.umd.js',
              format: 'umd',
              globals: {
                  react: 'React',
                  'react-dom': 'ReactDOM',
              },
          },
          {
              name: 'emotionStyled',
              input: 'node_modules/@emotion/styled/dist/emotion-styled.browser.esm.js',
              outputName: 'emotion-styled.umd.js',
              format: 'umd',
              globals: {
                  react: 'React',
                  'react-dom': 'ReactDOM',
                  '@emotion/react': 'emotionReact',
              },
          },
          {
              name: 'MaterialUI',
              input: 'node_modules/@mui/material/index.js',
              outputName: 'material-ui.umd.js',
              format: 'umd',
              globals: {
                  react: 'React',
                  'react-dom': 'ReactDOM',
                  '@emotion/styled': 'emotionStyled',
                  '@emotion/react': 'emotionReact'
              },
          },
]

export default  dependencies.map(dependency => ({
        input: dependency.input,
        output: {
            file: `dist/${dependencyPackage.name}/${dependency.outputName}`,
            format: dependency.format,
            name: dependency.name,
            globals: dependency.globals,
        },
        plugins: [
            nodeResolve({ browser: true, preferBuiltins: false }),
            commonjs(),
            replace({
                values: {
                    'process.env.NODE_ENV': JSON.stringify('production'),
                },
                preventAssignment: true,
            }),
            terser(),
        ],
        external: Object.keys(dependency.globals || {}),
    }));

After that I load them in the head in the right order.
This is also great to bundle other global dependencies and also bundle and provide some iife scripts

Keep in mind that this is just prototype code and I still need to prove it in prod.