[error] next 13 : Uncaught Error: invariant expected app router to be mounted

코딩 메모

[error] next 13 : Uncaught Error: invariant expected app router to be mounted

Dong _ hwa 2023. 7. 22. 03:15

next.js 13 버전에서 layout.tsx를 수정함과 동시에 오류가 났다.

 Uncaught Error: invariant expected app router to be mounted  at useRouter
 app-index.js:32 The above error occurred in the <HotReload> component:

에러가 나면 chat GPT 한테 먼저 물어보는데, next.13버전은 딱히 이용하기가 애매하다.. ㅠ,ㅠ

챗 지피티의 마지막이 2021년 9월인가 그래서.. 근데 13버전은 나온지 얼마 안돼서 챗지피티가 똑같은 대답만 반복한다 싶으면 아 이거 next 문제구나하고 바로 구글로 노선을 틀어버리면 됨..

https://github.com/vercel/next.js/issues/42829

Next 13 - dev environment React is not enabled / client components don't update · Issue #42829 · vercel/next.js

Verify canary release I verified that the issue exists in the latest Next.js canary release Provide environment information Operating System: Platform: darwin Arch: arm64 Version: Darwin Kernel Ver...

github.com

layout.tsx

export default function RootLayout({children}: {
  children: React.ReactNode;
}) {
  return (
    <>
      <AnimalHeader />
      <section
        className="pt-12"
        style={{ height: "100vh", width: "100%", paddingLeft: "12%" }}
      >
        {children}
      </section>
    </>
  );
}

기존에 내가 작성한 방식과 같았다. 그러니까 <html>, <body> 태그가 없었던 것...

변경한 코드

export default function RootLayout({children}: {
  children: React.ReactNode;
}) {
  return (
    <>
      <html lang="ko">
        <body>
          <AnimalHeader />
          <section
            className="pt-16"
            style={{ height: "100vh", width: "100%", paddingLeft: "12%" }}
          >
            {children}
          </section>
        </body>
      </html>
    </>
  );
}

루트 레이아웃은 html 및 body 태그를 포함해야 함!