Theme switching doesn't work with Remix

[arpitdalal]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

The theme in ErrorBoundary and CatchBoudnary of remix doesn't match with rest of the app.

Expected behavior 🤔

The theme selected should be respected in ErroBoundary and CatchBoundary too.

Steps to reproduce 🕹

Steps:

1. Visit the codesandbox
2. Toggle the theme to dark if not already
3. Hit the Test Root CatchBoundary link
4. You'll see the dark theme but if you refresh the page, the theme will fallback to light for some reason and you'll see Warning: Prop 'content' did not match. Server: "#90caf9" Client: "#1976d2" in the console. This warning is regarding the <meta name="theme-color" content={theme.palette.primary.main} /> tag in the root.

Context 🔦

I am trying to accomplish a successful MUI theme switch with error and catch boundaries too.

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: Linux 5.4 Debian GNU/Linux 10 (buster) 10 (buster)
  Binaries:
    Node: 16.12.0 - ~/.nvm/versions/node/v16.12.0/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.12.0/bin/yarn
    npm: 8.1.0 - ~/.nvm/versions/node/v16.12.0/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @emotion/react: ^11.7.1 => 11.7.1
    @emotion/styled: ^11.6.0 => 11.6.0
    @mui/base:  5.0.0-alpha.69
    @mui/icons-material: ^5.4.1 => 5.4.2
    @mui/material: ^5.4.1 => 5.4.2
    @mui/private-theming:  5.4.2
    @mui/styled-engine:  5.4.2
    @mui/system:  5.4.2
    @mui/types:  7.1.2
    @mui/utils:  5.4.2
    @types/react: ^17.0.38 => 17.0.39
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    typescript: ^4.5.4 => 4.5.5

[mnajdova]

You cannot just use the useTheme hook, because the ThemeProvider is a children of the CatchBoundary. Take a look at the react tree

You would need to do something similar as the ClientStyleContext.

[arpitdalal]

Thanks @mnajdova for pointing me in the right direction, I've hacked around this but I get a very weird error in the console: Uncaught TypeError: createTheme_default is not a function
Here's a codesandbox to see it yourself. There's not need to do any thing, just open the codesandbox and visit: https://si7i0x-3000.sse.codesandbox.io/ -> open dev console and there you'll see the error
Any idea, why would I be getting an error with createTheme from @mui/material/styles?

[mnajdova]

@arpitdalal have you resolved the use with the createTheme? I apologize, I just saw the notification

[arpitdalal]

@mnajdova I haven't resolved it yet, just can't understand where the problem is. Thank you for replying ☺️

[mnajdova]

All I see when I open the sandbox is the message: Upgrade Required. Just curious, did you try to import the getTheme using the "./themes" instead of "~/themes"? I don't think if it will fix it. It's a strange error :\

[arpitdalal]

@mnajdova Just open this: https://si7i0x-3000.sse.codesandbox.io/ and you'll see the error in the console. I think codesandbox doesn't like Remix or I'm making some mistake in the config but you gotta add the 3000 part in the URL so it goes to the port 3000 instead of the port that Remix server is running.
Trying to replace the ~/themes with ./themes on my local

[arpitdalal]

@mnajdova I tried to replace the imports from ~/themes to ./themes but didn't make a difference, the error in chrome console takes me to dark.ts file where I'm trying to create a theme with createTheme from @mui/material/styles. Attaching a screenshot

.

[mnajdova]

Alright, will look in to it next week.

[arpitdalal]

Hey @mnajdova Have you had a chance to look into this yet? Because it doesn't make any sense to me when it complains about an internal function of MUI 🤷‍♂️

[mnajdova]

It’s on my list for tomorrow, will respond once I have something

[mnajdova]

I've spent an hour on this, but I have no idea why it is happening. It's not showing on the examples project. I would propose changing the code step by step and see when it starts appearing. I am sorry I couldn't help more.

[arpitdalal]

Okay @mnajdova, thanks for checking, I'll try to reverse engineer this and see what is the cause for that error. I'm just trying to persist the theme in Error and Catch Boundaries because the example doesn't do that right now. Please correct me if I am wrong here.

[jacobgad]

i am having the same issue upgrading my react vite app from @mui/material 5.4.3 to 5.5.0,
"createTheme_default is not a function" in the console

As Remix uses Vite under the hood this issue should be renamed to "Theme switching doesn't work with Vite"
If anyone has found a solution that would be greatly appreciated.

[arpitdalal]

@jacobgad @mnajdova
Remix does not use Vite in any way or form, it uses esbuild

@jacobgad Are you server rendering your React app with Vite? Maybe this issue is tied to SSR?

[arpitdalal]

maybe it is with esbuild? Because Vite also uses esbuild

[arpitdalal]

@mnajdova and @jacobgad I think I found the issue (sort of) and discovered that there is something wrong with v5.5.0

In this og-codesandbox I was defining DEFAULT_THEME in app/themes/index.ts and importing in app/context/ClientStyleContext.tsx and I discovered that that import in app/context/ClientStyleContext from app/themes/index.ts was causing Uncaught TypeError: createTheme_default is not a function

so in this fixed-codesandbox I moved that DEFAULT_THEME from the app/themes/index.ts to app/constants/index.ts and import DEFAULT_THEME from that app/constants/index.ts file which solved the Uncaught TypeError: createTheme_default is not a function issue.
Note: @mui/material is on 5.4.1 for both codesandboxes

But, if I upgrade @mui/material to 5.5.0 in the fixed-codesandbox (here is that fixed-codesandbox-latest), I then receive Uncaught TypeError: useEnhancedEffect_default is not a function when going to ErrorBoundary or CatchBoundary by clicking the link and then refreshing the page. So before it was createTheme_default not being a function and not it is useEnhancedEffect_default not being a function and that too only for @mui/material at v5.5.0

@mnajdova please advice about the above^

[mnajdova]

Ok, using esbuild could be the issue. I don't think we have any test to catch regressions like these. cc @michaldudak may be interested too.

[mnajdova]

so in this fixed-codesandbox I moved that DEFAULT_THEME from the app/themes/index.ts to app/constants/index.ts and import DEFAULT_THEME from that app/constants/index.ts file which solved the Uncaught TypeError: createTheme_default is not a function issue.

This is strange and doesn't make much sense.

[arpitdalal]

This is strange and doesn't make much sense.

I agree, but Remix does things to code split between server and client, could that be an issue? I don't know

[mnajdova]

I agree, but Remix does things to code split between server and client, could that be an issue? I don't know

Could be, it's more likely to be an issue with remix, as the error occurs if things are moved in the folder structure over there in the project. Maybe some of the files need to be duplicated for both the client and the server.

[jacobgad]

@jacobgad @mnajdova
Remix does not use Vite in any way or form, it uses esbuild

@jacobgad Are you server rendering your React app with Vite? Maybe this issue is tied to SSR?

Thanks for the reply,
No my app is a completely client side react application with Vite as the build tool and react-router-dom V6 for the router

[mnajdova]

@jacobgad I've tried the example project we have with vite, but I didn't see any error in the console. I tried with both 5.5.0 and 5.5.1. Could you share a github repo with a reproduction using vite?

[arpitdalal]

@mnajdova I fixed the useEnhancedEffect_default is not a function by creating my own useEnhancedEffect hook similar to MUI's. Here's the fixed-codesandbox-latest with latest @mui/material version and custom useEnhancedEffect hook

I think it is esbuild not building MUI dependencies into the build or similar and that's why things are not a function.

I will close this issue since it is "resolved". esbuild problem needs its own issue to keep track of it. Thanks very much for the support!

[mnajdova]

Alright, please open a new issue for esbuild.

[arpitdalal]

@mnajdova @jacobgad Here's the esbuild issue: #31835

[tombohub]

@arpitdalal Hi, I have same error with default Remix template, but it happens only if I use Icons: #32891
Did you notice any relation with Icons? And do you have the latest working template for Remix?

[fullstackwebdev]

createTheme_default is not a function

I commented on the esbuild ticket but if somebody gets stuck this worked for me, change the import and remove '/styles'

---

in my theme.ts, if I use below, I can reproduce the issue: createTheme_default is not a function

import { createTheme } from '@mui/material/styles';

But if I use this line below, it fixes it:

import { createTheme } from '@mui/material';

remix / material, all npm "latest"

[jmaldon1]

I wrote the same thing in this issue because it was the first to pop up on google: #31835 (comment)

I was getting the Uncaught TypeError: createTheme_default is not a function issue with remix, it had to do with the <CssBaseline />.

If your project was set up using the Remix MUI Example, then the fix for me was to add the <CssBaseline /> to the Layout.tsx file. Like so:

import * as React from "react";
import Container from "@mui/material/Container";
import Box from "@mui/material/Box";
import CssBaseline from "@mui/material/CssBaseline";

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <Container maxWidth="sm">
      <Box sx={{ my: 4 }}>
        <CssBaseline />
        {children}
      </Box>
    </Container>
  );
}

although, still getting TypeError: useEnhancedEffect_default is not a function. Which seems to be fixed when I add icons (@mui/icons-material) to the page... not idea why.

Final Update:
After reading #31140 (comment), I downgraded mui to 5.4.1 and I no longer get the TypeError: useEnhancedEffect_default is not a function. So seems like there is a bug that still needs to be resolved in mui.

[arpitdalal]

See this commnet for concise findings of this issue and a couple of temporary workarounds.

[ali2210]

Kindly resolve this issue as soon as possibleand it's quite unexpected error

Uncaught TypeError: createTheme_default is not a function at Box.js:9:22
(anonymous) @

[Janpot]

We know esbuild gets confused with our package structure. As part of v7 we'll be updating our package layout and we're closing several issues similar to this one. @arpitdalal Would you mind updating your reproduction with @mui/material@next and verify it still reproduces?

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

[arpitdalal]

I could not reproduce this in the latest remix/react-router. If someone can reproduce this, please open up a new issue with a reproducible.

[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

@arpitdalal 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.