[system] getInitColorSchemeScript, createTheme() shouldn't have "use client" #42750

oliviertassinari · 2023-09-16T20:01:53Z

Steps to reproduce 🕹

Link to live example:

Steps:

Create a project with Next.js
Add in the layout

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

  return (
    <html lang="en">
      <head>
        {getInitColorSchemeScript()}
      </head>

Current behavior 😯

Expected behavior 🤔

It works

Context 🔦

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords:

The text was updated successfully, but these errors were encountered:

mj12albert · 2023-09-19T08:35:02Z

getInitColorSchemeScript does not have 'use client', but adding it back (PR) doesn't fix it 🤔: https://stackblitz.com/edit/github-ppgum4-bxmkqa?file=src%2Fapp%2Flayout.tsx

oliviertassinari · 2023-09-24T15:50:59Z

@mj12albert I think that this is the opposite problem. There should be no 'use client' in the import path.

In today's import path, there are a good number of them:

material-ui/packages/mui-material/src/styles/index.js

Line 1 in c23c40a

'use client';

then

material-ui/packages/mui-material/src/styles/CssVarsProvider.tsx

Line 1 in c23c40a

'use client';

then

material-ui/packages/mui-system/src/index.js

Line 1 in c23c40a

'use client';

cyrilchapon · 2023-10-12T22:03:55Z

Landed here after reproducing steps.
Any current workaround to avoid flickering while still using app folder and layout ?

bartlangelaan · 2024-01-17T20:56:49Z

As a workaround, it is possible to import from @mui/system/cssVars/getInitColorSchemeScript directly.

import { Experimental_CssVarsProvider } from "@mui/material";
import { AppRouterCacheProvider } from "@mui/material-nextjs/v14-appRouter";
import getInitColorSchemeScript from "@mui/system/cssVars/getInitColorSchemeScript";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <head>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link
          rel="preconnect"
          href="https://fonts.gstatic.com"
          crossOrigin="anonymous"
        />
        <link
          rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"
        />
      </head>
      <body>
        <AppRouterCacheProvider>
          <Experimental_CssVarsProvider defaultMode="system">
            {getInitColorSchemeScript({
              // These properties are normally set when importing from @mui/material,
              // but we have to set manually because we are importing from @mui/system.
              attribute: "data-mui-color-scheme",
              modeStorageKey: "mui-mode",
              colorSchemeStorageKey: "mui-color-scheme",
              // All options that you pass to CssVarsProvider you should also pass here.
              defaultMode: "system",
            })}
            {children}
          </Experimental_CssVarsProvider>
        </AppRouterCacheProvider>
      </body>
    </html>
  );
}

It would be nice if this could be integrated in the @mui/material-nextjs package, so that the provider and getInitColorSchemeScript function are combined (and you only have to pass the options once).

oliviertassinari · 2024-01-18T00:24:08Z

Same bug with createTheme. There is no reason I'm aware of for createTheme to not be used on the server:

https://stackblitz.com/edit/github-z45nfe-5k5dkz?file=src%2Fapp%2Fpage.tsx,src%2Fapp%2Flayout.tsx,src%2Ftheme.ts

I first saw a developer complain on Twitter, more recently on #40199 (comment).

jamietdavidson · 2024-02-08T18:57:51Z

Following up from #40945 (the issue closed right above) - the recommended steps there did not work (still experiencing flickering). Will be following this issue for updates.

siriwatknp · 2024-02-13T08:18:46Z

I'm on this. This should help with zero-runtime integration as well.

oliviertassinari · 2024-02-14T00:56:21Z

I took a few steps to fix this in #40663 but didn't go all in. Wanted to test the water.

siriwatknp · 2024-02-19T08:40:36Z

I got this error after removing use client directive from the index:

Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".
  {keys: ..., values: ..., up: function, down: ..., between: ..., only: ..., not: ..., unit: ...}

I wonder if it would be a better DX to add use client to createTheme and related functions.

oliviertassinari · 2024-02-19T14:18:21Z

Functions cannot be passed directly to Client Components

@siriwatknp Arf, tricky.

It goes back to my point in: emotion-js/emotion#2978 (comment). The right solution might be to have two default themes/two theme creators: one in the client-side bundle and one in the server-side bundle. I mean, it would be the exact same logic, but one would be flagged as use client, the other wouldn't, so two different entry points, one implementation.

How I understand things working:

bestickley · 2024-03-06T21:18:40Z

@bartlangelaan's workaround didn't work for me. Seems like it's not exported anymore. I've resorted to adding data-mui-color-scheme="dark" as an attribute in my top level <html> to get around the AppBar flickering between custom colors. This works for me since I'm only using dark mode. If there is a better way I'd be interested in knowing :)

siriwatknp · 2024-03-07T02:21:31Z

@oliviertassinari I'm removing createTheme() from the title. I think that createTheme() should have use client; to be used with Context.

LikeDreamwalker · 2024-06-06T03:25:33Z

As a workaround, it is possible to import from @mui/system/cssVars/getInitColorSchemeScript directly.

import { Experimental_CssVarsProvider } from "@mui/material";
import { AppRouterCacheProvider } from "@mui/material-nextjs/v14-appRouter";
import getInitColorSchemeScript from "@mui/system/cssVars/getInitColorSchemeScript";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <head>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link
          rel="preconnect"
          href="https://fonts.gstatic.com"
          crossOrigin="anonymous"
        />
        <link
          rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"
        />
      </head>
      <body>
        <AppRouterCacheProvider>
          <Experimental_CssVarsProvider defaultMode="system">
            {getInitColorSchemeScript({
              // These properties are normally set when importing from @mui/material,
              // but we have to set manually because we are importing from @mui/system.
              attribute: "data-mui-color-scheme",
              modeStorageKey: "mui-mode",
              colorSchemeStorageKey: "mui-color-scheme",
              // All options that you pass to CssVarsProvider you should also pass here.
              defaultMode: "system",
            })}
            {children}
          </Experimental_CssVarsProvider>
        </AppRouterCacheProvider>
      </body>
    </html>
  );
}

It would be nice if this could be integrated in the @mui/material-nextjs package, so that the provider and getInitColorSchemeScript function are combined (and you only have to pass the options once).

Thanks and it works for me!

eevloeev · 2024-06-09T12:50:48Z

The bug is still relevant

oliviertassinari · 2024-06-09T15:19:00Z

I think that createTheme() should have use client; to be used with Context.

@siriwatknp I would still expect the opposite. We need to be able to use the theme in server components, but also in client components. So I would expect that a theme is created twice.

oliviertassinari added bug 🐛 Something doesn't work package: system Specific to @mui/system status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Sep 16, 2023

This was referenced Sep 16, 2023

[core] Remove unused use client #38967

Merged

Improve Next.js support #34905

Open

[system] Move getInitColorSchemeScript from body to first in head #39009

Closed

zannager assigned mnajdova Sep 18, 2023

mj12albert assigned mj12albert and unassigned mnajdova Sep 19, 2023

mj12albert mentioned this issue Sep 19, 2023

[system] Fix getInitColorSchemeScript RSC error #39054

Closed

1 task

mnajdova assigned mnajdova and unassigned mj12albert Nov 9, 2023

ZeeshanTamboli removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Nov 15, 2023

oliviertassinari added the nextjs label Dec 29, 2023

oliviertassinari mentioned this issue Dec 29, 2023

[lab] Add use client directive #40358

Merged

oliviertassinari changed the title ~~[system] getInitColorSchemeScript shouldn't have "use client"~~ [system] getInitColorSchemeScript, createTheme() shouldn't have "use client" Jan 17, 2024

This was referenced Jan 18, 2024

[core] Remove unneeded use-clients #40663

Merged

Add use client directive to all components in a new build step mui/mui-x#9833

Open

oliviertassinari mentioned this issue Feb 8, 2024

Hydration issues still exist with NextJS when applying custom themes #40945

Closed

siriwatknp assigned siriwatknp and unassigned mnajdova Feb 13, 2024

siriwatknp mentioned this issue Feb 16, 2024

[material-ui] Remove use client from the index styles #41131

Closed

1 task

oliviertassinari mentioned this issue Feb 21, 2024

[docs] Fix useStorageState regressions #41223

Merged

siriwatknp changed the title ~~[system] getInitColorSchemeScript, createTheme() shouldn't have "use client"~~ [system] getInitColorSchemeScript shouldn't have "use client" Mar 7, 2024

oliviertassinari transferred this issue from mui/material-ui Jun 9, 2024

oliviertassinari changed the title ~~[system] getInitColorSchemeScript shouldn't have "use client"~~ [system] getInitColorSchemeScript, createTheme() shouldn't have "use client" Jun 9, 2024

siriwatknp added this to the Material UI: v6 milestone Jun 25, 2024

siriwatknp transferred this issue from mui/pigment-css Jun 25, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[system] getInitColorSchemeScript, createTheme() shouldn't have "use client" #42750

[system] getInitColorSchemeScript, createTheme() shouldn't have "use client" #42750

oliviertassinari commented Sep 16, 2023 •

edited by github-actions bot

Loading

mj12albert commented Sep 19, 2023

oliviertassinari commented Sep 24, 2023 •

edited

Loading

cyrilchapon commented Oct 12, 2023

bartlangelaan commented Jan 17, 2024

oliviertassinari commented Jan 18, 2024 •

edited

Loading

jamietdavidson commented Feb 8, 2024

siriwatknp commented Feb 13, 2024

oliviertassinari commented Feb 14, 2024

siriwatknp commented Feb 19, 2024

oliviertassinari commented Feb 19, 2024 •

edited

Loading

bestickley commented Mar 6, 2024

siriwatknp commented Mar 7, 2024

LikeDreamwalker commented Jun 6, 2024

eevloeev commented Jun 9, 2024

oliviertassinari commented Jun 9, 2024 •

edited

Loading

[system] getInitColorSchemeScript, createTheme() shouldn't have "use client" #42750

[system] getInitColorSchemeScript, createTheme() shouldn't have "use client" #42750

Comments

oliviertassinari commented Sep 16, 2023 • edited by github-actions bot Loading

Steps to reproduce 🕹

Current behavior 😯

Expected behavior 🤔

Context 🔦

Your environment 🌎

mj12albert commented Sep 19, 2023

oliviertassinari commented Sep 24, 2023 • edited Loading

cyrilchapon commented Oct 12, 2023

bartlangelaan commented Jan 17, 2024

oliviertassinari commented Jan 18, 2024 • edited Loading

jamietdavidson commented Feb 8, 2024

siriwatknp commented Feb 13, 2024

oliviertassinari commented Feb 14, 2024

siriwatknp commented Feb 19, 2024

oliviertassinari commented Feb 19, 2024 • edited Loading

bestickley commented Mar 6, 2024

siriwatknp commented Mar 7, 2024

LikeDreamwalker commented Jun 6, 2024

eevloeev commented Jun 9, 2024

oliviertassinari commented Jun 9, 2024 • edited Loading

oliviertassinari commented Sep 16, 2023 •

edited by github-actions bot

Loading

oliviertassinari commented Sep 24, 2023 •

edited

Loading

oliviertassinari commented Jan 18, 2024 •

edited

Loading

oliviertassinari commented Feb 19, 2024 •

edited

Loading

oliviertassinari commented Jun 9, 2024 •

edited

Loading