material-ui: Theme switching doesn't work with Remix

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:

Visit the codesandbox
Toggle the theme to dark if not already
Hit the Test Root CatchBoundary link
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

About this issue

Original URL
State: open
Created 2 years ago
Comments: 30 (11 by maintainers)

Most upvoted comments

@mnajdova @jacobgad Here’s the esbuild issue: https://github.com/mui/material-ui/issues/31835

arpitdalal on Mar 16, 2022

@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!

arpitdalal on Mar 15, 2022

I wrote the same thing in this issue because it was the first to pop up on google: https://github.com/mui/material-ui/issues/31835#issuecomment-1151859490

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 https://github.com/mui/material-ui/issues/31140#issuecomment-1067124578, 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.

jmaldon1 on Jun 10, 2022

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”

fullstackwebdev on Jun 6, 2022

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

mnajdova on Mar 10, 2022