[material-ui] esm.sh Typography component is not picking up the theme from the ThemeProvider

[Kulodo]

Steps to reproduce

Steps:

1. Open this link to live example: (required) https://codesandbox.io/p/sandbox/l9tkcj

Current behavior

The Typography component with text Heading 1 is displayed using the default theme eg fontSize is 6rem.

Expected behavior

The Typography component should pick up the theme provided by the ThemeProvider. i.e The font size of the h1 should therefore be 1rem as defined in the theme. The color should also be green.

Context

I am trying to apply a theme using ThemeProvider to the Typography component.
Note I am importing mui and react from esm.sh.
Interestingly if I append the import urls with '?dev' then the Typography component does pick up the theme from the ThemeProvider correctly.

Your environment

The live example is at https://codesandbox.io/p/sandbox/l9tkcj
I am using esm.sh to import.

Search keywords: Typography ThemeProvider

[siriwatknp]

Probably due to difference instance for the React Theme context. I'm not sure if we want to spend time to fix this.

[Kulodo]

Probably due to difference instance for the React Theme context. I'm not sure if we want to spend time to fix this.

Can you explain why you wouldn't want to fix this? Is it a bug in material-ui or not? Is there a work around?

[siriwatknp]

Can you explain why you wouldn't want to fix this? Is it a bug in material-ui or not? Is there a work around?

The workaround is to import from @mui/material to ensure that all the components are using the same Theme instance:

https://codesandbox.io/p/sandbox/mui-esm-sh-themeprovider-forked-2swlp9

[Kulodo]

Your fork is still not picking up myTheme through the theme provider.

[Kulodo]

@siriwatknp thanks for your help so far.

Here is an example that shows that your workaround isn't working.

I added the following to your workaround attempt. See https://codesandbox.io/p/sandbox/icy-voice-fzf82f

        palette: {
            primary: {
              main: '#ff0000',
            },
        },

This is not getting picked up in your modification to the line

<Typography variant="h1" sx={{ color: 'primary.main' }}>heading 1</Typography>

However, as I mentioned in my error report, if I append the import urls with '?dev' then the ThemeProvider does provide myTheme correctly and the Typography h1 does get the correct fontSize and color. See https://codesandbox.io/p/sandbox/awesome-mendeleev-mddzqh

So the production import urls are not working and the development import urls are.

Also I tried older version of material. I found that version 15.6.7 from 4 months ago was the newest version that works. See https://codesandbox.io/p/sandbox/nameless-moon-8xwxq4

I hope that is useful information for you.

Do you really think this is low priority error? It seems serious to me.

[marklundin]

Is esm.sh resolving a single instance of React

[DiegoAndai]

Hey @Kulodo, thanks for the report.

[...] if I append the import urls with '?dev' then the ThemeProvider does provide myTheme correctly

This is interesting. Do you know what is the difference in outcome with '?dev'? I'm unfamiliar with esm.sh, but if you can provide feedback on this and there's something misconfigured on our side, we can try to fix it. If you don't know what is different with '?dev', may I ask you to find similar issues on esm.sh (or create a new one) so we can get guidance from their side on what might be happening?

Thanks in advance.

[Kulodo]

Hi @DiegoAndai

Thanks so much for getting back to me. From https://esm.sh/#docs it says

Development Mode
import React from "https://esm.sh/react?dev";
With the ?dev option, esm.sh builds a module with process.env.NODE_ENV set to "development" or based on the condition development in the exports field. This is useful for libraries that have different behavior in development and production. For example, React will use a different warning message in development mode.

In the devtools on code sandboxes i've linked above you can see in the sources tab you can see what has been loaded from esm.sh. Below you can see the development versions of MUI have been loaded.

You can compare what esm loads with and without '"?dev". Also note above that in one of the codeboxes linked above I found the newest previous version of MUI that allowed my example app to work correctly. It was 15.6.7 from 4 months ago. So maybe you could compare what is loaded from esm.sh in 15.6.7 and the current latest version that isn't working.

[Janpot]

@Kulodo Would the following setup work for you? https://codesandbox.io/p/sandbox/themeprovider-fork1-forked-4zy7qr?file=%2Findex.html

[Kulodo]

@Janpot thanks for the reply. Yes the import map , and the 'external' query param does seem to work. I tried with react 18.3.1/19.0.0 and mui 5.16.15/6.3.1. These were all ok with the import map and not all ok without the import map.

Can you explain how your solution works?

There is one problem though. In the environment I am using called Playcanvas, where I want to use mui via esm.sh, I do not have the ability to manually create the import map which is created automatically when building the app. I will talk to the playcanvas team to see how I can add to the import map.

[Janpot]

Can you explain how your solution works?

I looked at your codesandbox and noticed two versions of react loading.

It looks like it's coming in through react-transition-group which is a dependency of @mui/material. It looks like esm.sh caches it with an outdated react import url (/stable/[email protected]/es2022/react.mjs). By externalizing react we make sure that this import specifier stays react instead of translated to a url on esm.sh, but then we'll have to make sure the browser can resolve it, which is what the import map is for. import map + externalizing ensures there is correct deduplication of react and react-dom, which is crucial for @mui/material to work correctly. If not correctly deduplicated it may or may not work, or partially. I hope this clears things up?

During my experimentation, I seemed to be having some luck with the following sandbox but no guarantees on this keeping working correctly. You can use it to unstuck yourself with playcanvas, but don't open tickets with it, we only support a deduped react/react-dom setup through e.g. import map + external.

closing as there is nothing to be done on MUI side

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@Kulodo How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

[Kulodo]

@Kulodo Would the following setup work for you? https://codesandbox.io/p/sandbox/themeprovider-fork1-forked-4zy7qr?file=%2Findex.html

Hi @Janpot , sorry to trouble you again. Your code sandbox solution has stopped working. Do you know what is the issue?

[Janpot]

Do you know what is the issue?

I saw an error as well that suggested there were two react versions on the page. Opened my devtools network tab to investigate which has "Disable Cache" checked. a reload of the page fixed the issue. You may want to try and clear cache.

[Kulodo]

Hi @Janpot, "disable cache". did fix the issue. Thanks

BTW the error was

[schlichtanders]

maybe a similar issue here - can you share what you refer to with "Disable Cache" being checked or not?

[Kulodo]

Open devtools network tab and there is a Disable cache checkbox.

[marklundin]

You can also use https://esm.sh/@mui/[email protected][email protected] which will pin the transitive dependancy.

See this sandbox