Sentry Answers>Next.js>

Uncaught Error: invariant expected app router to be mounted

Uncaught Error: invariant expected app router to be mounted

Matthew C.

—

The ProblemJump To Solution

You are migrating from the Next.js pages directory to the Next.js app directory. You may be doing this while migrating from Next.js 12 to Next.js 13. During migration, you get the following error in your browser dev tools console:

Click to Copy
Uncaught Error: invariant expected app router to be mounted
    at useRouter (navigation.js:131:15)
    at HotReload (hot-reloader-client.js:367:46)
    at renderWithHooks (react-dom.development.js:11021:18)
    at mountIndeterminateComponent (react-dom.development.js:16782:13)

Your root layout in the /app/layout.jsx file may have the following code:

Click to Copy
export default function RootLayout({
  children,
}) {
  return (
   <html lang="en">
      {/* Layout UI */}
      <main>{children}</main>
    </html>
  );
}

The root layout is used to apply a layout to all routes. The Next.js migration to the app router guide states that you should copy the contents of the pages directory _app and _document files to the root layout file.

The Solution

The root layout is missing a <body> tag:

Click to Copy
export default function RootLayout({
  children,
}) {
  return (
    <html lang="en">
      <body>
        {/* Layout UI */}
        <main>{children}</main>
      </body>
    </html>
  );
}

If you are using the app directory, the root layout is required, and it must contain <html> and <body> tags.

The root layout of the app directory takes over the role of the _app and _document files in the pages directory. The _document file is an optional file that’s called the custom document. It’s used to update the <html> and <body> tags that are used to render a Page. It requires the following components imported from ‘next/document’ for a page to be properly rendered: <Html>, <Head />, <Main />, and <NextScript />. There is no <Body> component.

Click to Copy
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

If you exclude the <body> tag in the example above, your pages will still render, and you won’t get any errors in your browser dev tools console.

  • Community SeriesDebug Next.js with Sentry
  • ResourcesJavaScript Frontend Error Monitoring 101
  • ResourcesSentry vs. Crashlytics: The Mobile Developer's Decision-Making Guide
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty Treats for Web Developers brought to you by Sentry. Web development tips and tricks hosted by Wes Bos and Scott Tolinski

    Listen to Syntax

Loved by over 4 million developers and more than 90,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

learn more about sentryjoin our discord
© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.