# Uncaught Error: invariant expected app router to be mounted

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

**URL:** https://sentry.io/answers/uncaught-error-invariant-expected-app-router-to-be-mounted/

---

## 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](https://nextjs.org/docs/app/getting-started/layouts-and-pages) in the `/app/layout.jsx` file may have the following code:

```tsx
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](https://nextjs.org/docs/app/guides/migrating/app-router-migration#migrating-_documentjs-and-_appjs) 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:

```javascript
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`](https://nextjs.org/docs/pages/building-your-application/routing/custom-app) and [`_document`](https://nextjs.org/docs/pages/building-your-application/routing/custom-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](https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts). 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.

```javascript
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.

---

*Source: [sentry.io/answers/uncaught-error-invariant-expected-app-router-to-be-mounted/](https://sentry.io/answers/uncaught-error-invariant-expected-app-router-to-be-mounted/)*