Answers by Sentry

Uncaught Error: invariant expected app router to be mounted

Matthew C.

The Problem

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.

Get Started With Sentry

Get actionable, code-level insights to resolve Next.js performance bottlenecks and errors.

Run the line of code below to:

  1. Create a free Sentry account

  2. Run the CLI install command to automatically add the Sentry SDK to your project:

    Click to Copy
    npx @sentry/wizard@latest -i nextjs

  3. Start capturing errors and performance issues

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
Share on Twitter
Bookmark this page
Ask a questionJoin the discussion

Related Answers

A better experience for your users. An easier life for your developers.

Try Sentry For FreeRequest a Demo
    TwitterGitHubDribbbleLinkedinDiscord
© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.