Uncaught Error: invariant expected app router to be mounted

Question

I've got an error while do migration to next 13 on my old project written in next 12.

I can't find fault in my code for that errors. And I googled it but i can't find any solution for this. It don't explains any errors for my code. How can I solve it?

I couldn't try anything because it do not explains any error for my code. Please let me know what is the origin for that error. Thank you.

++++++++++ navigation.js

function useRouter() {
    const router = (0, _react).useContext(_appRouterContext.AppRouterContext);
    if (router === null) {
        throw new Error('invariant expected app router to be mounted');
    }
    return router;
}

i think "next/navigation" contains this file (navigation.js)

this error threw when router is null, but i still can't know why router is null.

+++++++++++ layout.jsx

"use client";

import { motion, AnimatePresence } from "framer-motion";
import "animate.css";
import { useRouter } from "next/navigation";
import LoadingSpinner from "../components/layout/media/LoadingSpinner";

import Users from "../class/Users.class";

import { useEffect } from "react";
import create from "zustand";

import Head from "next/head";
import Image from "next/image";

import NavBar from "../components/layout/NavBar";
import SubTransition from "../components/transition/SubTransition";
import LoginModal from "../components/layout/LoginModal";

import "../styles/betconstruct_icons.css";
import "../styles/global.css";

const useStore = create(() => ({
  isShowLoginModal: false,
  isLoading: true,
}));

//default layout
function MainLayout({ children }) {
  

  useEffect(() => {
    Users.checkToken().then((res) => {
      if (res) {
        console.log("token is valid");
      } else {
        console.log("token is invalid");
      }
      LoadingDone();
    });
    //router.events.on("routeChangeStart", (url) => {
    //  LoadingNow();
    //});
    //router.events.on("routeChangeComplete", () => LoadingDone());
    //router.events.on("routeChangeError", () => LoadingDone());

    if (router.pathname === "/") {
      document.querySelector("body").classList.add("layout-bc");
      document.querySelector("body").classList.add("theme-default");
      document.querySelector("body").classList.add("smart-panel-is-visible");
      document.querySelector("body").classList.add("betslip-Hidden");
      document.querySelector("body").classList.add("is-home-page");
    }

    if (router.pathname !== "/") {
      document.querySelector("body").classList.add("layout-bc");
      document.querySelector("body").classList.add("theme-default");
      document.querySelector("body").classList.add("smart-panel-is-visible");
      document.querySelector("body").classList.add("betslip-Hidden");
      document.querySelector("body").classList.add("is-home-page");
    }
  }, []);

  const animate = {
    initial: {
      opacity: 0,
      transition: `transform 0.24s ease`,
    },
    animate: {
      opacity: 1,
      transition: `transform 0.24s ease`,
    },
    exit: {
      opacity: 0,
      transition: `transform 0.24s ease`,
    },
  };

  const animateFlyIn = {
    initial: {
      opacity: 0,
      x: 100,
      transition: `transform 0.24s ease`,
    },
    animate: {
      opacity: 1,
      x: 0,
      transition: `transform 0.24s ease`,
    },
    exit: {
      opacity: 0,
      x: 100,
      transition: `transform 0.24s ease`,
    },
  };

  const { isShowLoginModal, isLoading } = useStore();
  const openLoginModal = () => {
    useStore.setState({ isShowLoginModal: true });
  };
  const hideLoginModal = () => {
    useStore.setState({ isShowLoginModal: false });
  };
  const LoadingNow = () => {
    useStore.setState({ isLoading: true });
  };

  const LoadingDone = () => {
    useStore.setState({ isLoading: false });
  };

  const router = useRouter();

  return (
    <>
      <AnimatePresence exitBeforeEnter mode={"wait"}>
        {isLoading ? (
          <motion.div
            key={router.route}
            initial={animate.initial}
            animate={animate.animate}
            exit={animate.exit}
          >
            <LoadingSpinner router={router} />
          </motion.div>
        ) : null}

        {isShowLoginModal && (
          <LoginModal
            openLoginModal={openLoginModal}
            isShowLoginModal={isShowLoginModal}
            hideLoginModal={hideLoginModal}
            LoadingNow={LoadingNow}
            LoadingDone={LoadingDone}
          />
        )}
      </AnimatePresence>
      <NavBar
        isLoading={isLoading}
        isShowLoginModal={isShowLoginModal}
        openLoginModal={openLoginModal}
        hideLoginModal={hideLoginModal}
        LoadingNow={LoadingNow}
        LoadingDone={LoadingDone}
        router={router}
      />
      <SubTransition>
        <div className="layout-content-holder-bc">{children}</div>
      </SubTransition>
    </>
  );
}

export default MainLayout;

+++ This error not occurs for /pages directory. only occurs in using /app directory

@xlab Please edit your question and put the code there. That way it becomes more readable for all of us. — Palladium02, Nov 21 '22 at 08:11
@xlab please add the code where you are using the `useRouter()` Hook. NextJS Framework code isn't helpful. We need to see the code you wrote in order to see what's wrong. — Shivangam Soni, Nov 21 '22 at 08:18
In addition to your code, can you please tell us whether you are using the app directory or the pages directory pattern? — Palladium02, Nov 21 '22 at 08:32
@Palladium02 This error not occurs for /pages directory. only occurs in using /app directory — Evans Benedict, Nov 21 '22 at 08:39

score 71 · Answer 1 · edited Jul 06 '23 at 11:49

71

Happened to me when layout.tsx didn't have <body> and <html> tag.

Edit:

Here is the exact section from documentation

The root layout must define <html> and <body> tags since Next.js does not automatically create them.

edited Jul 06 '23 at 11:49

gazdagergo

6,187
1
31
45

answered Nov 28 '22 at 13:11

Ayhan APAYDIN

850
5
7

2

Same here, html was missing too – patrick Nov 29 '22 at 10:22
5

Damn, nice. This should be opened as an issue on Next.js' github for a better error message. – brandonscript Apr 12 '23 at 19:10

score 8 · Answer 2 · answered Nov 21 '22 at 14:45

While transferring the files to the new app the same error popped up which led me to believe it was something in the code I copied over. The issue was in my layout.tsx file that was causing hydration / mounting issues because of a dom mismatch.

Old layout causing bug

export default function RootLayout({ children}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
    <div className={styles.container}>
      <header className={styles.header}>
          <>
            <Image
              priority
              src="/images/profile.jpg"
              className={utilStyles.borderCircle}
              height={144}
              width={144}
              alt=""
            />
            <h1 className={utilStyles.heading2Xl}>{name}</h1>
          </>
      </header>
      <main>{children}</main>
    </div>
    </html>
  );

Fixed code in layout.tsx

export default function RootLayout({ children}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
    <head className={styles.header}>
    </head>
    <body>{children}</body>
    </html>
  );
}

Even better: reference layout from beta docs

export default function RootLayout({ children }) {
  return (
    <html lang="en">
    {
    }
    <head />
    <body>{children}</body>
    </html>
  );
}

**Errors for reference if anyone else is encountering this problem.

Uncaught Error: invariant expected app router to be mounted

react-dom.development.js:21494 The above error occurred in the component:
at HotReload (webpack-internal:///./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:19:11)**

score 3 · Answer 3 · answered Jan 05 '23 at 16:29

3

The top-most layout is called the Root Layout. This required layout is shared across all pages in an application. Root layouts must contain html and body tags.

export default function RootLayout({ children }: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Sources:

answered Jan 05 '23 at 16:29

mjuopperi

773
7
25

That answer comes after the other ones but is much better. It is easy to miss that Root Layout (Required) must have `html` and `body` tags. – RaphaMex Mar 04 '23 at 01:26
Improved mine to include actual wording from the documentation. – Ayhan APAYDIN Jul 05 '23 at 09:36

score 1 · Answer 4 · answered Jul 01 '23 at 23:11

Don't put any Wrapper Element outside body tag like this

   <AUthProvider>
    <body>
          {children}
     </body>
   </AuthProvider>

but make sure that body tag always includes all components

    <body>
       <AUthProvider>
          {children}
      <AUthProvider>
    </body>

hopefully this helps

score 0 · Answer 5 · answered Apr 11 '23 at 15:33

0

I had the same problem and it was because I was wrapping my <body/> component on the layout file with another component. Apparently you shouldn't do that and instead wrap your {children} component with whatever you are wrapping your body component, just like this:

  <html lang="en">
      <body>
        <SideBar>{children}</SideBar>
      </body>
  </html>

answered Apr 11 '23 at 15:33

Juan Emilio

151
3
5

Yeah, it's not only body. I was missing the entire html base structure. – mayid May 25 '23 at 19:47

score 0 · Answer 6 · answered Jun 05 '23 at 01:55

If you have other components inside the _app.js that you had copied over to layout.js (e.g. theme provider, redux, redux persist), it should be inside the <body> tag. Basically, it worked for me when the <body> tag was the first child of the <html> tag.

score 0 · Answer 7 · answered Jun 30 '23 at 03:29

0

FWIW, I had a basic loading.tsx placed at the root app level. Once I moved it into the page subfolder under app folder it started working again.

answered Jun 30 '23 at 03:29

D Joyce

191
2
12

score 0 · Answer 8 · answered Sep 03 '23 at 08:41

I solved this problem in version 13.4.19

When you want to use app directory, you use different layers, so you must use <html></html> and <body><body /> tags in each layer.

for example

app/(home)/layout.tsx

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body>{children}</body>
    </html>
  )
}

app/(auth)/layout.tsx

export default function AuthLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body>{children}</body>
    </html>
  )
}

Uncaught Error: invariant expected app router to be mounted

8 Answers8