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:
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:
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:
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.
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.
- Sentry BlogCommon Errors in Next.js and How to Resolve Them
- Community SeriesDebug Next.js with Sentry
- ResourcesJavaScript Frontend Error Monitoring 101
- Syntax.fmListen to the Syntax Podcast
- Listen to the Syntax Podcast
![Syntax.fm logo]()
Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.
SEE EPISODES
Considered “not bad” by 4 million developers and more than 150,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.