[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.