[DashboardLayout] `color-scheme` hydration warnings #4491

ashishjaswal2002 · 2024-11-29T10:12:18Z

Search keywords:

ashishjaswal2002 · 2024-11-29T10:13:04Z

this is my Nextjs layout.jsx code

import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
Provider
import localFont from "next/font/local";
import "./globals.css";
import Provider from '../util/Providers';
import DashboardLayoutBasic from '@/components/dashboardLayout/page';


const geistSans = localFont({
  src: "./fonts/GeistVF.woff",
  variable: "--font-geist-sans",
  weight: "100 900",
});
const geistMono = localFont({
  src: "./fonts/GeistMonoVF.woff",
  variable: "--font-geist-mono",
  weight: "100 900",
});

export const metadata = {
  title: "one7sportsAdminPanel_Frontend",
  description: "Admin panel frontend.",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >

  
    <Provider>

   <AppRouterCacheProvider>

    <DashboardLayoutBasic>
      {children}
    </DashboardLayoutBasic>
   </AppRouterCacheProvider>

    </Provider>


      </body>
    </html>
  );
}

ashishjaswal2002 · 2024-11-29T10:13:35Z

'use client'
import * as React from 'react';
import PropTypes from 'prop-types';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import { createTheme } from '@mui/material/styles';
import DashboardIcon from '@mui/icons-material/Dashboard';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
import BarChartIcon from '@mui/icons-material/BarChart';
import DescriptionIcon from '@mui/icons-material/Description';
import LayersIcon from '@mui/icons-material/Layers';
import { AppProvider } from '@toolpad/core/AppProvider';
import { DashboardLayout } from '@toolpad/core/DashboardLayout';
import { useDemoRouter } from '@toolpad/core/internal';

const NAVIGATION = [
  {
    kind: 'header',
    title: 'Main items',
  },
  {
    segment: 'dashboard',
    title: 'Dashboard',
    icon: <DashboardIcon />,
  },
  {
    segment: 'orders',
    title: 'Orders',
    icon: <ShoppingCartIcon />,
  },
  {
    kind: 'divider',
  },
  {
    kind: 'header',
    title: 'Analytics',
  },
  {
    segment: 'reports',
    title: 'Reports',
    icon: <BarChartIcon />,
    children: [
      {
        segment: 'sales',
        title: 'Sales',
        icon: <DescriptionIcon />,
      },
      {
        segment: 'traffic',
        title: 'Traffic',
        icon: <DescriptionIcon />,
      },
    ],
  },
  {
    segment: 'integrations',
    title: 'Integrations',
    icon: <LayersIcon />,
  },
];

const demoTheme = createTheme({
  cssVariables: {
    colorSchemeSelector: 'data-toolpad-color-scheme',
  },
  colorSchemes: { light: true, dark: true },
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 600,
      lg: 1200,
      xl: 1536,
    },
  },
});

function DemoPageContent({ pathname }) {
  return (
    <Box
      sx={{
        py: 4,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        textAlign: 'center',
      }}
    >
      <Typography>Dashboard content for {pathname}</Typography>
    </Box>
  );
}

DemoPageContent.propTypes = {
  pathname: PropTypes.string.isRequired,
};

function DashboardLayoutBasic(props) {
  const { window } = props;

  const router = useDemoRouter('/dashboard');

  // Remove this const when copying and pasting into your project.
  const demoWindow = window !== undefined ? window() : undefined;

  return (
    // preview-start
    <AppProvider
      navigation={NAVIGATION}
      router={router}
      theme={demoTheme}
      window={demoWindow}
    >
      <DashboardLayout>
        <DemoPageContent pathname={router.pathname} />
      </DashboardLayout>
    </AppProvider>
    // preview-end
  );
}

DashboardLayoutBasic.propTypes = {
  /**
   * Injected by the documentation to work in an iframe.
   * Remove this when copying and pasting into your project.
   */
  window: PropTypes.func,
};

export default DashboardLayoutBasic;

this is my another component named DashboardLayoutBasic which i importing in layout.jsx

aarongarciah · 2024-11-29T11:07:20Z

Hey @ashishjaswal2002, please provide a playground or repository so we can take a look.

ashishjaswal2002 · 2024-11-29T13:00:45Z

https://github.com/ashishjaswal2002/Materialuirepotesting

ashishjaswal2002 · 2024-11-29T13:01:12Z

not working i am using this as an example https://mui.com/toolpad/core/introduction/examples/

bharatkashyap · 2024-11-29T13:43:26Z

not working i am using this as an example https://mui.com/toolpad/core/introduction/examples/

Is it possible to create a minimal reproduction in CodeSandbox to make it possible to debug this? By minimal reproduction, I mean adding the minimum amount of code it takes to reproduce this error

ashishjaswal2002 · 2024-11-29T13:47:31Z

I m using next 15 i think on sand box it has different version

bharatkashyap · 2024-11-29T14:00:49Z

I m using next 15 i think on sand box it has different version

You can create your own sandbox to demonstrate the error

ashishjaswal2002 · 2024-11-29T14:28:37Z

https://codesandbox.io/p/github/ashishjaswal2002/Materialuirepotesting/main?import=true

ashishjaswal2002 · 2024-11-29T16:18:49Z

@bharatkashyap did you find the error

ashishjaswal2002 · 2024-12-02T05:45:12Z

@bharatkashyap i figured out the issue i wrap the childrens in themeProvider but the issue is Where should i write my navigation or AppProvider component which provides navigation?

import React from "react";
import { AppRouterCacheProvider } from "@mui/material-nextjs/v15-appRouter";
import localFont from "next/font/local";
import "./globals.css";
import Provider from "../util/Providers";
import { AppProvider } from "@toolpad/core/nextjs";
import DashboardIcon from "@mui/icons-material/Dashboard";
import ShoppingCartIcon from "@mui/icons-material/ShoppingCart";
import demoTheme from "@/theme/theme";
import {ThemeProvider} from '@mui/material/styles'
const NAVIGATION = [
  {
    kind: "header",
    title: "Main items",
  },
  {
    title: "Dashboard",
    icon: <DashboardIcon />,
  },
  {
    segment: "orders",
    title: "Orders",
    icon: <ShoppingCartIcon />,
  },
];

const geistSans = localFont({
  src: "./fonts/GeistVF.woff",
  variable: "--font-geist-sans",
  weight: "100 900",
});
const geistMono = localFont({
  src: "./fonts/GeistMonoVF.woff",
  variable: "--font-geist-mono",
  weight: "100 900",
});

export const metadata = {
  title: "Something",
  description: "Spometjing",
};

export default  function RootLayout({ children }) {
  return (
    <html lang="en" >
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`} >
        <Provider>
          <AppRouterCacheProvider options={{ enableCssLayer: true }} >
            
           <ThemeProvider  theme={demoTheme}>

            {children}
            
            </ThemeProvider>

          </AppRouterCacheProvider>
        </Provider>
      </body>
    </html>
  );
}

ashishjaswal2002 · 2024-12-02T06:11:50Z

if i add App provider inside themeProvider it gives me hydration error
NextJS15

import React from "react";
import { AppRouterCacheProvider } from "@mui/material-nextjs/v15-appRouter";
import localFont from "next/font/local";
import "./globals.css";
import Provider from "../util/Providers";
import { AppProvider } from "@toolpad/core/nextjs";
import DashboardIcon from "@mui/icons-material/Dashboard";
import ShoppingCartIcon from "@mui/icons-material/ShoppingCart";
import demoTheme from "@/theme/theme";
import {ThemeProvider} from '@mui/material/styles'
const NAVIGATION = [
  {
    kind: "header",
    title: "Main items",
  },
  {
    title: "Dashboard",
    icon: <DashboardIcon />,
  },
  {
    segment: "orders",
    title: "Orders",
    icon: <ShoppingCartIcon />,
  },
];

const geistSans = localFont({
  src: "./fonts/GeistVF.woff",
  variable: "--font-geist-sans",
  weight: "100 900",
});
const geistMono = localFont({
  src: "./fonts/GeistMonoVF.woff",
  variable: "--font-geist-mono",
  weight: "100 900",
});

export const metadata = {
  title: "osfaasafs",
  description: "asfasfas",
};

export default  function RootLayout({ children }) {
  return (
    <html lang="en" >
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`} >
        <Provider>
          <AppRouterCacheProvider options={{ enableCssLayer: true }} >
            
           <ThemeProvider  theme={demoTheme}>

            <AppProvider>

            {children}

            </AppProvider>
            
            </ThemeProvider>

          </AppRouterCacheProvider>
        </Provider>
      </body>
    </html>
  );
}
```

ashishjaswal2002 · 2024-12-02T06:57:24Z

@aarongarciah please give me guidance.

bharatkashyap · 2024-12-02T09:30:01Z

if i add App provider inside themeProvider it gives me hydration error NextJS15

Not sure if I understand your need correctly but you should be able to pass the theme object directly to the theme prop of the AppProvider. Refer the following docs section https://mui.com/toolpad/core/react-app-provider/#theming

ashishjaswal2002 · 2024-12-02T09:55:47Z

Still getting same issue

ashishjaswal2002 · 2024-12-02T09:57:06Z

import React from "react";
import { AppRouterCacheProvider } from "@mui/material-nextjs/v15-appRouter";
import localFont from "next/font/local";
import "./globals.css";
import Provider from "../util/Providers";
import DashboardIcon from "@mui/icons-material/Dashboard";
import ShoppingCartIcon from "@mui/icons-material/ShoppingCart";
import demoTheme from "@/theme/theme";
import { ThemeProvider } from "@mui/material/styles";
import { AppProvider } from "@toolpad/core/nextjs";
import logo from "@assets/Images/Logo.png";

const navigation = [
  {
    segment: "dashboard",
    title: "Dashboard",
    icon: <DashboardIcon />,
  },
  {
    segment: "ground-manager",
    title: "Ground Manager",
    icon: <ShoppingCartIcon />,
    children: [
      {
        segment: "view-grounds",
        title: "View Grounds",
        icon: <ShoppingCartIcon />,
      },
    ],
  },
  {
    segment: "banner-manager",
    title: "Banner Manager",
    icon: <ShoppingCartIcon />,
    children: [
      {
        segment: "add-banners",
        title: "Add New Banner",
        icon: <ShoppingCartIcon />,
      },
      {
        segment: "view-banners",
        title: "View All Banners",
        icon: <ShoppingCartIcon />,
      },
    ],
  },
  {
    segment: "tournament-manager",
    title: "Tournament Manager",
    icon: <ShoppingCartIcon />,
    children: [
      {
        segment: "add-tournament",
        title: "Add Tournament",
        icon: <ShoppingCartIcon />,
      },
      {
        segment: "view-tournament",
        title: "View Tournament",
        icon: <ShoppingCartIcon />,
      },
      {
        segment: "user-tournament/register",
        title: "Registered User",
        icon: <ShoppingCartIcon />,
      },
    ],
  },
  {
    segment: "user-manager",
    title: "User Manager",
    icon: <ShoppingCartIcon />,
    children: [
      {
        segment: "ground-owners",
        title: "View Ground Owner ",
        icon: <ShoppingCartIcon />,
      },
      {
        segment: "user-registered",
        title: "View Users",
        icon: <ShoppingCartIcon />,
      },
    ],
  },
  {
    segment: "support-manager",
    title: "Support Manager",
    icon: <ShoppingCartIcon />,
    children: [
      {
        segment: "user-support",
        title: "User Support",
        icon: <ShoppingCartIcon />,
      },
    ],
  },
  {
    segment: "notification-manager",
    title: "Notification Manager",
    icon: <ShoppingCartIcon />,
    children: [
      {
        segment: "push-notification",
        title: "App Notification",
        icon: <ShoppingCartIcon />,
      },
    ],
  },
];
const geistSans = localFont({
  src: "./fonts/GeistVF.woff",
  variable: "--font-geist-sans",
  weight: "100 900",
});
const geistMono = localFont({
  src: "./fonts/GeistMonoVF.woff",
  variable: "--font-geist-mono",
  weight: "100 900",
});

export const metadata = {
  title: "asdasdas",
  description: "adsasdasd",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <Provider>
          <AppRouterCacheProvider>
            <AppProvider
              theme={demoTheme}
              navigation={navigation}
              branding={{
                logo: <img src={logo} alt="logo" />,
                title: "",
              }}
            >
              {children}
            </AppProvider>
          </AppRouterCacheProvider>
        </Provider>
      </body>
    </html>
  );
}

this is my code Here Provider is React Query --->

"use client";

import { QueryClientProvider,QueryClient } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import {  useState } from "react";



export default  function  Provider({children}){

    const[queryClient] = useState(()=> new QueryClient({

      defaultOptions:{
        queries:{
          staleTime:6*1000,
          refetchInterval:6*1000,
          cacheTime: 1000 * 60 * 60 * 24, //24 hourss...
        },
      }
    }));



    return(

        <QueryClientProvider client={queryClient}>
          
          <ReactQueryDevtools initialIsOpen={false} />

          {children}

        </QueryClientProvider>
    )

}

ashishjaswal2002 · 2024-12-02T10:46:08Z

@bharatkashyap

bharatkashyap · 2024-12-02T11:55:33Z

@bharatkashyap

Try adding data-toolpad-color-scheme="light" to the html tag in the Root Layout

apedroferreira · 2024-12-02T12:05:48Z

@bharatkashyap

Try adding data-toolpad-color-scheme="light" to the html tag in the Root Layout

This should fix the problem for now, but before we close this issue let's try to find out why it is required to add data-toolpad-color-scheme="light" to the html tag and make it so that it's not required.

ashishjaswal2002 · 2024-12-02T12:17:08Z

still same issue

ashishjaswal2002 · 2024-12-02T12:19:09Z

MY updated Code in NextJS RootLayout.


import React from "react";
import { AppRouterCacheProvider } from "@mui/material-nextjs/v15-appRouter";
import localFont from "next/font/local";
import "./globals.css";
import Provider from "../util/Providers";
import DashboardIcon from "@mui/icons-material/Dashboard";
import ShoppingCartIcon from "@mui/icons-material/ShoppingCart";
import demoTheme from "@/theme/theme";
import { ThemeProvider } from "@mui/material/styles";
import { AppProvider } from "@toolpad/core/nextjs";
import logo from "@assets/Images/Logo.png";

const navigation = [
  {
    segment: "dashboard",
    title: "Dashboard",
    icon: <DashboardIcon />,
  },
  {
    segment: "ground-manager",
    title: "Ground Manager",
    icon: <ShoppingCartIcon />,
    children: [
      {
        segment: "view-grounds",
        title: "View Grounds",
        icon: <ShoppingCartIcon />,
      },
    ],
  },
  {
    segment: "banner-manager",
    title: "Banner Manager",
    icon: <ShoppingCartIcon />,
    children: [
      {
        segment: "add-banners",
        title: "Add New Banner",
        icon: <ShoppingCartIcon />,
      },
      {
        segment: "view-banners",
        title: "View All Banners",
        icon: <ShoppingCartIcon />,
      },
    ],
  },
  {
    segment: "tournament-manager",
    title: "Tournament Manager",
    icon: <ShoppingCartIcon />,
    children: [
      {
        segment: "add-tournament",
        title: "Add Tournament",
        icon: <ShoppingCartIcon />,
      },
      {
        segment: "view-tournament",
        title: "View Tournament",
        icon: <ShoppingCartIcon />,
      },
      {
        segment: "user-tournament/register",
        title: "Registered User",
        icon: <ShoppingCartIcon />,
      },
    ],
  },
  {
    segment: "user-manager",
    title: "User Manager",
    icon: <ShoppingCartIcon />,
    children: [
      {
        segment: "ground-owners",
        title: "View Ground Owner ",
        icon: <ShoppingCartIcon />,
      },
      {
        segment: "user-registered",
        title: "View Users",
        icon: <ShoppingCartIcon />,
      },
    ],
  },
  {
    segment: "support-manager",
    title: "Support Manager",
    icon: <ShoppingCartIcon />,
    children: [
      {
        segment: "user-support",
        title: "User Support",
        icon: <ShoppingCartIcon />,
      },
    ],
  },
  {
    segment: "notification-manager",
    title: "Notification Manager",
    icon: <ShoppingCartIcon />,
    children: [
      {
        segment: "push-notification",
        title: "App Notification",
        icon: <ShoppingCartIcon />,
      },
    ],
  },
];
const geistSans = localFont({
  src: "./fonts/GeistVF.woff",
  variable: "--font-geist-sans",
  weight: "100 900",
});
const geistMono = localFont({
  src: "./fonts/GeistMonoVF.woff",
  variable: "--font-geist-mono",
  weight: "100 900",
});

export const metadata = {
  title: "dasadsasd",
  description: "Some Description.",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en"  data-toolpad-color-scheme="light">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <Provider>
          <AppRouterCacheProvider>
            <AppProvider
              theme={demoTheme}
              navigation={navigation}
              branding={{
                logo: <img src={logo} alt="logo" />,
                title: "",
              }}
            >
              {children}
            </AppProvider>
          </AppRouterCacheProvider>
        </Provider>
      </body>
    </html>
  );
}

bharatkashyap · 2024-12-02T12:33:29Z

MY updated Code in NextJS RootLayout

Try changing the value of the attribute to dark

ashishjaswal2002 · 2024-12-02T12:38:15Z

@bharatkashyap
Same ERROR

Console Error

Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used

- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

See more info here: https://nextjs.org/docs/messages/react-hydration-error


 ...
  <Router actionQueue={{state:{...}, ...}} assetPrefix="">
    <HistoryUpdater>
      <RuntimeStyles>
        <HotReload assetPrefix="">
          <ReactDevOverlay state={{nextId:1, ...}} dispatcher={{...}}>
            <DevRootNotFoundBoundary>
              <NotFoundBoundary notFound={<NotAllowedRootNotFoundError>}>
                <NotFoundErrorBoundary pathname="/dashboard" notFound={<NotAllowedRootNotFoundError>} ...>
                  <RedirectBoundary>
                    <RedirectErrorBoundary router={{...}}>
                      <Head>
                        <link>
                          <script>
                            <script>
                              <script>
                                <script>
                                  <script>
                                    <script>
                                      <script>
                                        <script>
                                          <script>
                                            <script>
                                              <RootLayout>
                                                <html
                                                  lang="en"
                                                    >
                                                      ...
                                                        ...
+                                                    data-toolpad-color-scheme="dark"
-                                                    data-toolpad-color-scheme="light"

ashishjaswal2002 · 2024-12-02T12:44:15Z

@bharatkashyap @aarongarciah @apedroferreira
If i follow this then how can i integrate Dashboard Layout. It is not mentioned here that how can we use Dashboard Layout.
https://mui.com/material-ui/integrations/nextjs/

Hydration Error is not occured if i following this but it is mentioned different in dashboard layout.
https://mui.com/toolpad/core/react-dashboard-layout/

It is very confusing.

bharatkashyap · 2024-12-02T12:53:48Z

@bharatkashyap @aarongarciah @apedroferreira If i follow this then how can i integrate Dashboard Layout. It is not mentioned here that how can we use Dashboard Layout. https://mui.com/material-ui/integrations/nextjs/

Hydration Error is not occured if i following this but it is mentioned different in dashboard layout. https://mui.com/toolpad/core/react-dashboard-layout/

It is very confusing.

Try to follow these docs: https://mui.com/toolpad/core/integrations/nextjs-approuter/

bharatkashyap · 2024-12-02T12:56:16Z

I cannot reproduce the error anymore - the hydration warning goes away even in the Sandbox you've provided on adding the data-toolpad-color-scheme attribute

I think it might not be very productive to have this discussion on a GitHub issue. @ashishjaswal2002 Please open a question on Stack Overflow with a reproduction link and we can hopefully find an answer there 👍🏻

ashishjaswal2002 · 2024-12-02T12:57:38Z

Let me following the article again if i didn't find the issue then i m closing by myself.

ashishjaswal2002 · 2024-12-02T13:22:07Z

It is working fine but there is one problem
According to Material UI -> Create a Dashboard Layout.
https://mui.com/toolpad/core/integrations/nextjs-approuter/
if i don't use (use client ) it is giving me error. but if i used it below in my next js app.It is showing no error.

'use client'
import React from 'react';
import { DashboardLayout, PageContainer } from "@toolpad/core";


export default  function DashboardLayoutUi({children}){
  return (

<>
<DashboardLayout>


{children}


</DashboardLayout>

</>

  )


}

ashishjaswal2002 · 2024-12-02T13:22:11Z

@bharatkashyap

ashishjaswal2002 · 2024-12-03T04:25:08Z

Material Ui should add
'use client' on their Next Js integration documents. I am closing this issue as of now.

ashishjaswal2002 · 2024-12-03T04:25:27Z

Closed

github-actions · 2024-12-03T04:25:40Z

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

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

github-actions bot added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Nov 29, 2024

ashishjaswal2002 mentioned this issue Nov 29, 2024

Hydration Error when i importing Dashboardlayout in my next js app mui/material-ui#44601

Closed

aarongarciah self-assigned this Nov 29, 2024

aarongarciah added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Nov 29, 2024

aarongarciah transferred this issue from mui/material-ui Nov 29, 2024

github-actions bot added status: waiting for maintainer These issues haven't been looked at yet by a maintainer and removed status: waiting for author Issue with insufficient information labels Nov 29, 2024

apedroferreira unassigned aarongarciah Dec 2, 2024

apedroferreira added bug 🐛 Something doesn't work and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Dec 2, 2024

apedroferreira added this to MUI Toolpad public roadmap Dec 2, 2024

apedroferreira moved this to Backlog in MUI Toolpad public roadmap Dec 2, 2024

bharatkashyap changed the title ~~How to import Dashboard Layout toolpad core in nextjs i am getting some errors.~~ [DashboardLayout] color-scheme hydration warnings Dec 2, 2024

ashishjaswal2002 closed this as completed Dec 3, 2024

github-project-automation bot moved this from Backlog to Completed in MUI Toolpad public roadmap Dec 3, 2024

prakhargupta1 removed this from MUI Toolpad public roadmap Dec 13, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DashboardLayout] `color-scheme` hydration warnings #4491

[DashboardLayout] `color-scheme` hydration warnings #4491

ashishjaswal2002 commented Nov 29, 2024 •

edited by github-actions bot

Loading

ashishjaswal2002 commented Nov 29, 2024 •

edited by bharatkashyap

Loading

ashishjaswal2002 commented Nov 29, 2024 •

edited

Loading

aarongarciah commented Nov 29, 2024

ashishjaswal2002 commented Nov 29, 2024

ashishjaswal2002 commented Nov 29, 2024

bharatkashyap commented Nov 29, 2024

ashishjaswal2002 commented Nov 29, 2024

bharatkashyap commented Nov 29, 2024

ashishjaswal2002 commented Nov 29, 2024

ashishjaswal2002 commented Nov 29, 2024

ashishjaswal2002 commented Dec 2, 2024 •

edited by bharatkashyap

Loading

ashishjaswal2002 commented Dec 2, 2024 •

edited by bharatkashyap

Loading

ashishjaswal2002 commented Dec 2, 2024

bharatkashyap commented Dec 2, 2024 •

edited

Loading

ashishjaswal2002 commented Dec 2, 2024

ashishjaswal2002 commented Dec 2, 2024 •

edited by bharatkashyap

Loading

ashishjaswal2002 commented Dec 2, 2024

bharatkashyap commented Dec 2, 2024

apedroferreira commented Dec 2, 2024

ashishjaswal2002 commented Dec 2, 2024

ashishjaswal2002 commented Dec 2, 2024

bharatkashyap commented Dec 2, 2024

ashishjaswal2002 commented Dec 2, 2024 •

edited by bharatkashyap

Loading

ashishjaswal2002 commented Dec 2, 2024 •

edited

Loading

bharatkashyap commented Dec 2, 2024

bharatkashyap commented Dec 2, 2024 •

edited

Loading

ashishjaswal2002 commented Dec 2, 2024 •

edited

Loading

ashishjaswal2002 commented Dec 2, 2024

ashishjaswal2002 commented Dec 2, 2024

ashishjaswal2002 commented Dec 3, 2024

ashishjaswal2002 commented Dec 3, 2024

github-actions bot commented Dec 3, 2024

[DashboardLayout] color-scheme hydration warnings #4491

[DashboardLayout] color-scheme hydration warnings #4491

Comments

ashishjaswal2002 commented Nov 29, 2024 • edited by github-actions bot Loading

ashishjaswal2002 commented Nov 29, 2024 • edited by bharatkashyap Loading

ashishjaswal2002 commented Nov 29, 2024 • edited Loading

aarongarciah commented Nov 29, 2024

ashishjaswal2002 commented Nov 29, 2024

ashishjaswal2002 commented Nov 29, 2024

bharatkashyap commented Nov 29, 2024

ashishjaswal2002 commented Nov 29, 2024

bharatkashyap commented Nov 29, 2024

ashishjaswal2002 commented Nov 29, 2024

ashishjaswal2002 commented Nov 29, 2024

ashishjaswal2002 commented Dec 2, 2024 • edited by bharatkashyap Loading

ashishjaswal2002 commented Dec 2, 2024 • edited by bharatkashyap Loading

ashishjaswal2002 commented Dec 2, 2024

bharatkashyap commented Dec 2, 2024 • edited Loading

ashishjaswal2002 commented Dec 2, 2024

ashishjaswal2002 commented Dec 2, 2024 • edited by bharatkashyap Loading

ashishjaswal2002 commented Dec 2, 2024

bharatkashyap commented Dec 2, 2024

apedroferreira commented Dec 2, 2024

ashishjaswal2002 commented Dec 2, 2024

ashishjaswal2002 commented Dec 2, 2024

bharatkashyap commented Dec 2, 2024

ashishjaswal2002 commented Dec 2, 2024 • edited by bharatkashyap Loading

ashishjaswal2002 commented Dec 2, 2024 • edited Loading

bharatkashyap commented Dec 2, 2024

bharatkashyap commented Dec 2, 2024 • edited Loading

ashishjaswal2002 commented Dec 2, 2024 • edited Loading

ashishjaswal2002 commented Dec 2, 2024

ashishjaswal2002 commented Dec 2, 2024

ashishjaswal2002 commented Dec 3, 2024

ashishjaswal2002 commented Dec 3, 2024

github-actions bot commented Dec 3, 2024

[DashboardLayout] `color-scheme` hydration warnings #4491

[DashboardLayout] `color-scheme` hydration warnings #4491

ashishjaswal2002 commented Nov 29, 2024 •

edited by github-actions bot

Loading

ashishjaswal2002 commented Nov 29, 2024 •

edited by bharatkashyap

Loading

ashishjaswal2002 commented Nov 29, 2024 •

edited

Loading

ashishjaswal2002 commented Dec 2, 2024 •

edited by bharatkashyap

Loading

ashishjaswal2002 commented Dec 2, 2024 •

edited by bharatkashyap

Loading

bharatkashyap commented Dec 2, 2024 •

edited

Loading

ashishjaswal2002 commented Dec 2, 2024 •

edited by bharatkashyap

Loading

ashishjaswal2002 commented Dec 2, 2024 •

edited by bharatkashyap

Loading

ashishjaswal2002 commented Dec 2, 2024 •

edited

Loading

bharatkashyap commented Dec 2, 2024 •

edited

Loading

ashishjaswal2002 commented Dec 2, 2024 •

edited

Loading