chakra-ui Warning Extra attributes from the server class

Description

When I use the "ColorModeScript" component in next v13 I get the following error in the browser console.

'use client';

import { ReactNode } from 'react';

import theme from '@/lib/chakra-ui/theme';
import { ChakraProvider, cookieStorageManagerSSR, localStorageManager } from '@chakra-ui/react';

type CustomChakraProviderProps = {
    children: ReactNode;
    cookie?: string | null;
};

function CustomChakraProvider({ children, cookie }: CustomChakraProviderProps) {
    return (
        <ChakraProvider resetCSS theme={theme} colorModeManager={cookie ? cookieStorageManagerSSR(cookie) : localStorageManager}>
            {children}
        </ChakraProvider>
    );
}

export { ColorModeScript } from '@chakra-ui/react';
export default CustomChakraProvider;

// I tried using "use client" here too, but same error.

import CustomChakraProvider, { ColorModeScript } from '@chakra-ui/react';

export default function RootLayout({ children }: { children: React.ReactNode }) {
    return (
        <html>
            <head />
            <body>
                <ColorModeScript initialColorMode={'system'} type={'localStorage'} />
                <CustomChakraProvider>
                    {children}
                </CustomChakraProvider>
            </body>
        </html>
    );
}

Link to Reproduction

https://stackblitz.com/edit/vercel-next-js-tzxuxl?file=app/page.tsx

Steps to reproduce

Create a nextjs v13 project
Try use ColorModeScript in the layout.js (with or without "use client;" on top) file
Check browser console
See error

Chakra UI Version

2.4.1

Browser

Microsoft Edge 107.0.1418.56

Operating System

[ ] macOS
[X] Windows
[ ] Linux

Additional Information

Nov 26 '22 03:11 sawa-ko

Hello! I'm also facing the same issue here!

Mar 13 '23 08:03 Masaki-G

I have this problem too (

Mar 27 '23 15:03 NazarLysyi

Same issue here. For me it's at a button and the error I get is Extra attributes from the server: control-id.

Edit: no matter what button component I add or delete, even a single button in my page still results in this warning. Below is my full warning:

Full warning

Warning: Extra attributes from the server: control-id
    at button
    at eval (webpack-internal:///(app-client)/./node_modules/@emotion/react/dist/emotion-element-6a883da9.browser.esm.js:57:66)
    at ChakraComponent (webpack-internal:///(app-client)/./node_modules/@chakra-ui/system/dist/chunk-E32MZNBA.mjs:50:102)
    at eval (webpack-internal:///(app-client)/./node_modules/@chakra-ui/button/dist/chunk-NAA7TEES.mjs:29:84)
    at LessonSidebarButton (webpack-internal:///(app-client)/./components/Lesson/Sidebar/LessonSidebarButton.tsx:14:22)
    at div
    at eval (webpack-internal:///(app-client)/./node_modules/@emotion/react/dist/emotion-element-6a883da9.browser.esm.js:57:66)
    at ChakraComponent (webpack-internal:///(app-client)/./node_modules/@chakra-ui/system/dist/chunk-E32MZNBA.mjs:50:102)
    at eval (webpack-internal:///(app-client)/./node_modules/@chakra-ui/layout/dist/chunk-O5CRURSQ.mjs:24:5)
    at VStack
    at LessonSidebar (webpack-internal:///(app-client)/./components/Lesson/Sidebar/LessonSidebar.tsx:30:11)
    at div
    at eval (webpack-internal:///(app-client)/./node_modules/@emotion/react/dist/emotion-element-6a883da9.browser.esm.js:57:66)
    at ChakraComponent (webpack-internal:///(app-client)/./node_modules/@chakra-ui/system/dist/chunk-E32MZNBA.mjs:50:102)
    at eval (webpack-internal:///(app-client)/./node_modules/@chakra-ui/layout/dist/chunk-O5CRURSQ.mjs:24:5)
    at HStack
    at ActivityPage (webpack-internal:///(app-client)/./app/(lessonLayout)/lesson/[lessonId]/activity/[activityId]/activity-page.tsx:19:11)
    at ScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:184:9)
    at InnerLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:241:11)
    at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:54:9)
    at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:62:11)
    at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:35:11)
    at LoadingBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:354:11)
    at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:72:11)
    at RenderFromTemplateContext (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/render-from-template-context.js:12:34)
    at OuterLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:23:11)
    at ScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:184:9)
    at InnerLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:241:11)
    at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:54:9)
    at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:62:11)
    at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:35:11)
    at LoadingBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:354:11)
    at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:72:11)
    at RenderFromTemplateContext (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/render-from-template-context.js:12:34)
    at OuterLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:23:11)
    at ScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:184:9)
    at InnerLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:241:11)
    at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:54:9)
    at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:62:11)
    at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:35:11)
    at LoadingBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:354:11)
    at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:72:11)
    at RenderFromTemplateContext (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/render-from-template-context.js:12:34)
    at OuterLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:23:11)
    at ScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:184:9)
    at InnerLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:241:11)
    at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:54:9)
    at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:62:11)
    at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:35:11)
    at LoadingBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:354:11)
    at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:72:11)
    at RenderFromTemplateContext (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/render-from-template-context.js:12:34)
    at OuterLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:23:11)
    at ScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:184:9)
    at InnerLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:241:11)
    at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:54:9)
    at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:62:11)
    at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:35:11)
    at LoadingBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:354:11)
    at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:72:11)
    at RenderFromTemplateContext (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/render-from-template-context.js:12:34)
    at OuterLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:23:11)
    at div
    at eval (webpack-internal:///(app-client)/./node_modules/@emotion/react/dist/emotion-element-6a883da9.browser.esm.js:57:66)
    at ChakraComponent (webpack-internal:///(app-client)/./node_modules/@chakra-ui/system/dist/chunk-E32MZNBA.mjs:50:102)
    at eval (webpack-internal:///(app-client)/./node_modules/@chakra-ui/layout/dist/chunk-O5CRURSQ.mjs:24:5)
    at VStack
    at div
    at eval (webpack-internal:///(app-client)/./node_modules/@emotion/react/dist/emotion-element-6a883da9.browser.esm.js:57:66)
    at ChakraComponent (webpack-internal:///(app-client)/./node_modules/@chakra-ui/system/dist/chunk-E32MZNBA.mjs:50:102)
    at eval (webpack-internal:///(app-client)/./node_modules/@chakra-ui/layout/dist/chunk-O5CRURSQ.mjs:24:5)
    at VStack
    at Layout (webpack-internal:///(app-client)/./app/(lessonLayout)/layout.tsx:12:11)
    at ScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:184:9)
    at InnerLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:241:11)
    at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:54:9)
    at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:62:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:28:9)
    at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:35:11)
    at LoadingBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:354:11)
    at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:72:11)
    at RenderFromTemplateContext (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/render-from-template-context.js:12:34)
    at OuterLayoutRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/layout-router.js:23:11)
    at EnvironmentProvider (webpack-internal:///(app-client)/./node_modules/@chakra-ui/react-env/dist/chunk-23XYWYLU.mjs:32:11)
    at ColorModeProvider (webpack-internal:///(app-client)/./node_modules/@chakra-ui/color-mode/dist/chunk-4DEUOPYU.mjs:28:5)
    at ThemeProvider (webpack-internal:///(app-client)/./node_modules/@emotion/react/dist/emotion-element-6a883da9.browser.esm.js:96:64)
    at ThemeProvider (webpack-internal:///(app-client)/./node_modules/@chakra-ui/system/dist/chunk-3ZTTLJBV.mjs:28:11)
    at ChakraProvider (webpack-internal:///(app-client)/./node_modules/@chakra-ui/provider/dist/chunk-5PBJXT35.mjs:19:5)
    at ChakraProvider2 (webpack-internal:///(app-client)/./node_modules/@chakra-ui/react/dist/chunk-DGNA6VRZ.mjs:17:5)
    at SessionProvider (webpack-internal:///(app-client)/./node_modules/next-auth/react/index.js:455:24)
    at CacheProvider (webpack-internal:///(app-client)/./node_modules/@chakra-ui/next-js/dist/chunk-76HOU655.mjs:15:3)
    at body
    at html
    at Layout (webpack-internal:///(app-client)/./app/layout.tsx:75:11)
    at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:54:9)
    at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/redirect-boundary.js:62:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:28:9)
    at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/not-found-boundary.js:35:11)
    at ReactDevOverlay (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:61:9)
    at HotReload (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:20:11)
    at Router (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:50:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:59:9)
    at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:72:11)
    at AppRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:27:13)
    at ServerRoot (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:147:11)
    at RSCComponent
    at Root (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:164:11)

Apr 12 '23 13:04 wouter-deen

Same issue only in development not in production like on Vercel there is no error.

Apr 14 '23 14:04 Inam-ulrehman

same

May 05 '23 10:05 BEDIRHANSAMSA

same

May 13 '23 03:05 jianshangquan

I get a

Warning: Extra attributes from the server: control-id

error as well

Im using React 18 and Next.JS 13.4

May 14 '23 00:05 elewin

having same issue

Jun 07 '23 17:06 Juuddi

any update?

Jun 12 '23 19:06 tolgaand

I also get a warning:

errors.js:38 Warning: Extra attributes from the server: class
    at body
    at html
    at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/.pnpm/[email protected]_cpvzbyutg2okhbbkipcbqd7uwi/node_modules/next/dist/client/components/redirect-boundary.js:73:9)
    at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/.pnpm/[email protected]_cpvzbyutg2okhbbkipcbqd7uwi/node_modules/next/dist/client/components/redirect-boundary.js:81:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-client)/./node_modules/.pnpm/[email protected]_cpvzbyutg2okhbbkipcbqd7uwi/node_modules/next/dist/client/components/not-found-boundary.js:51:9)
    at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/.pnpm/[email protected]_cpvzbyutg2okhbbkipcbqd7uwi/node_modules/next/dist/client/components/not-found-boundary.js:59:11)
    at ReactDevOverlay (webpack-internal:///(app-client)/./node_modules/.pnpm/[email protected]_cpvzbyutg2okhbbkipcbqd7uwi/node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9)
    at HotReload (webpack-internal:///(app-client)/./node_modules/.pnpm/[email protected]_cpvzbyutg2okhbbkipcbqd7uwi/node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:276:11)
    at Router (webpack-internal:///(app-client)/./node_modules/.pnpm/[email protected]_cpvzbyutg2okhbbkipcbqd7uwi/node_modules/next/dist/client/components/app-router.js:90:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-client)/./node_modules/.pnpm/[email protected]_cpvzbyutg2okhbbkipcbqd7uwi/node_modules/next/dist/client/components/error-boundary.js:77:9)
    at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/.pnpm/[email protected]_cpvzbyutg2okhbbkipcbqd7uwi/node_modules/next/dist/client/components/error-boundary.js:101:11)
    at AppRouter (webpack-internal:///(app-client)/./node_modules/.pnpm/[email protected]_cpvzbyutg2okhbbkipcbqd7uwi/node_modules/next/dist/client/components/app-router.js:387:13)
    at ServerRoot (webpack-internal:///(app-client)/./node_modules/.pnpm/[email protected]_cpvzbyutg2okhbbkipcbqd7uwi/node_modules/next/dist/client/app-index.js:154:11)
    at RSCComponent
    at Root (webpack-internal:///(app-client)/./node_modules/.pnpm/[email protected]_cpvzbyutg2okhbbkipcbqd7uwi/node_modules/next/dist/client/app-index.js:171:11)

I'm almost certain that it's coming from this library.

Jun 21 '23 14:06 diogomartino

Yeah this issue is still popping up. Would be great if anyone has an explanation / solution for this.

Jul 04 '23 15:07 TaufiqSyed

I’m starting to think it might be unrelated chrome plugins causing this, can anyone confirm ?

Jul 04 '23 16:07 elewin

@elewin I have tried this on incognito to no avail. Also tried suppressing hydration warnings. The only thing that does the trick is commenting out ColorModeScript inside the layout.tsx file, which reduces functionality. (As a note, I tried the Chakra UI Next JS GitHub example, and it throws the same error on the console)

Jul 04 '23 18:07 TaufiqSyed

I've fixed the problem, try rendering the ColorModeScript after the page is mounted!

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);
  return (
    <html>
      <body>
        {children}
         // Here's the point.
        {mounted && <ColorModeScript initialColorMode={theme.config.initialColorMode}></ColorModeScript>}
      </body>
    </html>
  );
}

Jul 13 '23 03:07 TTBOBO

Yeah this issue is still popping up. Would be great if anyone has an explanation / solution for this.

The <ColorModeScript /> injects a <script> that immediately updates body's class attribute by values chakra-ui-light or chakra-ui-dark using DOM API as soon as the browser reads it. Afterwards, React's hydration process begins. React discovers mismatches between the server-rendered content and the content after hydration.

Why the discrepancy with the "server-rendered" content? Technically, the server returns the initial content without these class changes. However, the injected <script> modifies the class attribute, leading React to observe the updated version, which is different from the original server-rendered content.

I have no idea why this does not happen in the Pages router in Next.js. I've only observed this behaviour in the App router.

On a side note, technically, you could manually insert a className to the body to circumvent this issue or add a suppressHydrationWarning prop to body and html, but it's a rather hacky solution.

Jul 28 '23 14:07 nt9142

So apparently chakra-ui can fix this "warning".

Maybe when the page request is made to the server, they could send the colorMode value (from the system and preferences), and then set the correct colorMode according to the { initialColorMode, useSystemColorMode }: ThemeConfig.

Aug 02 '23 20:08 elpupi

Yeah this issue is still popping up. Would be great if anyone has an explanation / solution for this. ... On a side note, technically, you could manually insert a className to the body to circumvent this issue or add a suppressHydrationWarning prop to body and html, but it's a rather hacky solution.

@nt9142 - i did try adding a className to body, but that through another warning, and i tried suppressHydrationWarning in

, literally the line immediately before ColorModeScript and it still throws the warning.

Sep 01 '23 01:09 marqpdx

This can be resolved by placing the ColorModeScript inside the Chakra provider provided by Chakra for Next.js within the "app" directory:

"use client";

import { CacheProvider } from "@chakra-ui/next-js";
import { ChakraProvider, ColorModeScript } from "@chakra-ui/react";
import { theme } from "@/styles/theme";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <CacheProvider>
      <ChakraProvider
        theme={theme}
        toastOptions={{
          defaultOptions: { position: "bottom", isClosable: true },
        }}
      >
        <ColorModeScript initialColorMode={theme.config.initialColorMode} />
        {children}
      </ChakraProvider>
    </CacheProvider>
  );
}

//theme.js
import { extendTheme, type ThemeConfig } from "@chakra-ui/react";

const themeConfig: ThemeConfig = {
  initialColorMode: "dark",
  useSystemColorMode: false,
};

export const theme = extendTheme({ config: themeConfig });

Sep 01 '23 23:09 SebastianCoceres

For me doesn't matter where I put the ColorModeScritp tag, it still print some warning, so I had to put "suppressHydrationWarning={true}" flag on "html" and "body" tags in RootLayout, each one supress a different warning. My libs versions:

"@chakra-ui/next-js": "^2.1.5",
"@chakra-ui/react": "^2.8.0",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"framer-motion": "^10.15.1",
"next": "13.4.13",

Sep 04 '23 18:09 CaioMS2000

in root layout.js

<html lang="en" suppressHydrationWarning={true}>

does the job

thank you @CaioMS2000

Sep 09 '23 09:09 Donal2

Setting supressHydrationWarning={true} on html didn't work for me.

Sep 26 '23 20:09 duplxey

Is it bad to prevent that script on server side?

const ColorModeScript = dynamic(
  () => import('@chakra-ui/react').then((mod) => mod.ColorModeScript),
  { ssr: false }
);

This way the warning is gone but I don't know the downside of it.

Oct 02 '23 12:10 sangdth

in root layout.js

<html lang="en" suppressHydrationWarning={true}>

does the job

thank you @CaioMS2000

Thank you

Oct 29 '23 12:10 mhmd-aashik

any update? i get same issue

Nov 09 '23 09:11 Y0SH4

<html lang="en" suppressHydrationWarning={true}>
      <body className={inter.className} suppressHydrationWarning={true}>

A little hack while we wait for colorModeSript to be compatible with the app directory.

Please note, however, that this only hides the error - it's still there.

Other information, these types of errors: Are often due to an extension, here for example, this error appears because I have LanguageTools installed.

These extensions modify the DOM in order to function properly, and this can sometimes cause hydration warnings.

Dec 12 '23 13:12 davidmonnom

Same issue here. For me it's at a button and the error I get is Extra attributes from the server: control-id.

Edit: no matter what button component I add or delete, even a single button in my page still results in this warning. Below is my full warning:

Full warning

This is usually caused by an extension passing these extra attributes with your code when it is executed on the browser trying to interact with the UI, this creates a mismatch between what was rendered on the server and what is rendered on the client.

Extensions similar to Grammarly, ColorZilla and LanguageTool are therefore the cause of this warning, so you have to find out which one is doing this and then disable/configure it to not run on the ports you usually use for development. This is the straightforward fix for the warining, since it is always recommended to avoid extensions in development.

Dec 25 '23 08:12 abhishektyagi2912

A é character (even unicode escaped) causes this for me.

Mar 27 '24 18:03 nicovalencia

chakra-ui chakra-ui copied to clipboard

Warning Extra attributes from the server class

Description

Link to Reproduction

Steps to reproduce

Chakra UI Version

Browser

Operating System

Additional Information

chakra-ui
chakra-ui copied to clipboard