`'use client';
import GridSection from '@/_core/components/grid-section/GridSection';
import { ChakraProvider } from '@chakra-ui/react';
import { ReactNode, useEffect } from 'react';
import 'react-toastify/dist/ReactToastify.css';
import Cookies from 'universal-cookie';
import styles from './Admin.module.scss';
import Sidebar from './components/sidebar/Sidebar';
const Layout = ({ children }: { children: ReactNode }) => {
const cookies = new Cookies();
const token = cookies.get('token');
useEffect(() => {
if (!token) {
window.location.href = '/login';
}
}, []);
return (
<div className={styles.admin}>
{token ? (
<ChakraProvider>
<GridSection
bannerUrl="***.jpeg"
isAdmin={true}
>
<main className={styles.container}>
<Sidebar />
<div className={styles.main}>{children}</div>
</main>
</GridSection>
</ChakraProvider>
) : (
1
)}
</div>
);
};
export default Layout;`
I am here working on the layout of my interface, and I want it to operate on the client side. I don't want unauthorized users to access the underlying pages, but I'm receiving an error. I can't figure out what the issue is.
warning: Expected server HTML to contain a matching <div> in <div>. at div at GridSection (webpack-internal:///(app-pages-browser)/./src/_core/components/grid-section/GridSection.tsx:17:11) at EnvironmentProvider (webpack-internal:///(app-pages-browser)/./node_modules/@chakra-ui/react-env/dist/chunk-VMD3UMGK.mjs:34:11) at ColorModeProvider (webpack-internal:///(app-pages-browser)/./node_modules/@chakra-ui/color-mode/dist/chunk-AMBGAKG2.mjs:29:5) at ThemeProvider (webpack-internal:///(app-pages-browser)/./node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js:123:50) at ThemeProvider (webpack-internal:///(app-pages-browser)/./node_modules/@chakra-ui/system/dist/chunk-MFVQSVQB.mjs:30:11) at ChakraProvider (webpack-internal:///(app-pages-browser)/./node_modules/@chakra-ui/provider/dist/chunk-3DDHO3UN.mjs:21:5) at ChakraProvider2 (webpack-internal:///(app-pages-browser)/./node_modules/@chakra-ui/react/dist/chunk-QAITB7GG.mjs:19:5) at div at Layout (webpack-internal:///(app-pages-browser)/./src/app/(admin)/layout.tsx:22:11) at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:241:11) at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9) at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11) at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9) at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11) at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:338:11) at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:110:11) at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:152:9) at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:227:11) at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44) at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:348:11) at div at div at body at html at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9) at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11) at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9) at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11) at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:32:11) at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9) at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:294:11) at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:157:11) at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:82:9) at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:110:11) at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:440:13) at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:126:11) at RSCComponent at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:142:11) window.console.error @ app-index.js:32 Show 1 more frame Show less react-dom.development.js:6824 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server. at throwOnHydrationMismatch (react-dom.development.js:6824:9) at tryToClaimNextHydratableInstance (react-dom.development.js:6869:7) at updateHostComponent$1 (react-dom.development.js:15553:5) at beginWork$1 (react-dom.development.js:17397:14) at HTMLUnknownElement.callCallback (react-dom.development.js:19465:14) at Object.invokeGuardedCallbackImpl (react-dom.development.js:19514:16) at invokeGuardedCallback (react-dom.development.js:19589:29) at beginWork (react-dom.development.js:25723:7) at performUnitOfWork (react-dom.development.js:24552:12) at workLoopConcurrent (react-dom.development.js:24538:5) at renderRootConcurrent (react-dom.development.js:24494:9) at performConcurrentWorkOnRoot (react-dom.development.js:23358:38) at workLoop (scheduler.development.js:261:34) at flushWork (scheduler.development.js:230:14) at MessagePort.performWorkUntilDeadline (scheduler.development.js:534:21) app-index.js:32 Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>. window.console.error @ app-index.js:32 Show 1 more frame Show less 5on-recoverable-error.js:20 Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server. at throwOnHydrationMismatch (react-dom.development.js:6824:9) at tryToClaimNextHydratableInstance (react-dom.development.js:6869:7) at updateHostComponent$1 (react-dom.development.js:15553:5) at beginWork$1 (react-dom.development.js:17397:14) at beginWork (react-dom.development.js:25701:14) at performUnitOfWork (react-dom.development.js:24552:12) at workLoopConcurrent (react-dom.development.js:24538:5) at renderRootConcurrent (react-dom.development.js:24494:9) at performConcurrentWorkOnRoot (react-dom.development.js:23358:38) at workLoop (scheduler.development.js:261:34) at flushWork (scheduler.development.js:230:14) at MessagePort.performWorkUntilDeadline (scheduler.development.js:534:21) react-dom.development.js:15501 Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering. at updateHostRoot (react-dom.development.js:15501:57) at beginWork$1 (react-dom.development.js:17380:14) at beginWork (react-dom.development.js:25701:14) at performUnitOfWork (react-dom.development.js:24552:12) at workLoopSync (react-dom.development.js:24268:5) at renderRootSync (react-dom.development.js:24223:7) at recoverFromConcurrentError (react-dom.development.js:23451:20) at performConcurrentWorkOnRoot (react-dom.development.js:23396:26) at workLoop (scheduler.development.js:261:34) at flushWork (scheduler.development.js:230:14) at MessagePort.performWorkUntilDeadline (scheduler.development.js:534:21)