Question 197170 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Can't run Chakra UI with Next.js 13

I was looking the chakra ui installation with nextjs13 from the attached link and I believe did it completely. However, when I saved my file afterwards, I noticed that the automatic page did not refresh and I encountered hydration error in places. The error code seen in the console is as follows:
image

layout.tsx file in below,

import './globals.css'
import {Inter} from 'next/font/google'
import Providers from "@/app/chakra-provider";

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
        <html lang="en">
            <Providers>
                {children}
            </Providers>
        </html>
  )
}

provider.tsx

'use client'

import { CacheProvider } from '@chakra-ui/next-js'
import { ChakraProvider } from '@chakra-ui/react'

export default function Providers({
    children
    }: {
    children: React.ReactNode
}) {
    return (
        <CacheProvider>
            <ChakraProvider>
                {children}
            </ChakraProvider>
        </CacheProvider>
    )
}

I was browsing about this on Stackoverflow, and someone mentioned that he experienced this after replacing the
<body className={inter.className}>{children}</body> line
with just {children}. I am having a similar problem right now.

Tags:

2

Answers


  1. 0

    The top-most layout is called the Root Layout. This required layout is shared across all pages in an application. Root layouts must contain html and body tags.

    After some searching I think this maybe the problem
    So make sure body tag is present in top-level of the app after html

    export default function RootLayout({ children }: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

    Another Solution #2

    Found the solution here https://storybook.js.org/blog/integrate-nextjs-and-storybook-automatically/ under next/navigation

    export const Example = {
  parameters: {
    nextjs: {
      appDirectory: true,
    },
  },
};
    Login or Signup to reply.
  2. 0

    This error message "uncaught error: invariant expected app router to be mounted" suggests that there might be an issue with mounting the app router in a Next.js application . It could be related to incorrect configuration or missing dependencies. Some possible solutions are:

    Ensure that the Next.js router context provider is set up correctly in the _app.js file with the import { Router } from ‘next/router’; statement.

    Make sure that all dependencies are up-to-date and installed correctly. In this case, it might be helpful to clean the node_modules folder and re-run the installation of dependencies using npm install.

    Check if you have inadvertently removed tag in your Layout component.

    Check if you have mistakenly imported useRouter hook inside the app root which should only be imported inside the pages.

    In some cases, using the old React version might cause this error. So, try updating the React version in the package.json file with npm install react@latest.

    If you are using Storybook, it might be helpful to update it to the latest version and add the nextjs preset.

    It is recommended to go through the above steps one by one to narrow down the root cause of this error.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search