Error 'invariant expected app router to be mounted' when using pages router

[BorghildSelle]

Context

What's your version of nuqs?

1.19.1

Next.js information (obtained by running next info):

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 23.5.0: Wed May  1 20:09:52 PDT 2024; root:xnu-10063.121.3~5/RELEASE_X86_64
Binaries:
  Node: 21.1.0
  npm: 10.2.0
  Yarn: 1.17.0
  pnpm: 8.5.1
Relevant Packages:
  next: 13.5.6
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.5.4
Next.js Config:
  output: standalone

Are you using:

• ❌ The app router
• ✅The pages router
• ❌ The basePath option in your Next.js config
• ❌ The experimental windowHistorySupport flag in your Next.js config

Description

When setting up nuqs like this on an SSR page in Next with Pages router:

import { parseAsArrayOf, parseAsString, useQueryState } from 'nuqs'
...
  const [topic, setTopic] = useQueryState('topic', parseAsArrayOf(parseAsString))

we get this error:

Uncaught Error: invariant expected app router to be mounted
    at useRouter (.../node_modules/.pnpm/next@13.5.6_@babel+core@7.21.4_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/client/components/navigation.js:144:15)
    at useQueryState (.../node_modules/.pnpm/nuqs@1.19.1_next@13.5.6/node_modules/nuqs/dist/index.js:306:18)

We are using useRouter from next/router multiple places without error. We have not started migration to app yet, so no /app folder. This error appeared when installing nuqs. What could be wrong?

Reproduction

Use Nuqs with Nextjs 13.5.6 Pages router on a SSR page

[franky47]

Thanks for the report, it looks similar to #591, but in both cases I haven't been able to reproduce it with a stock Next.js app, maybe there is something else in your setup that causes this?

Reproduction: https://github.com/franky47/nuqs-repro-640

[BorghildSelle]

Hmm, we are using pages router with getServerSideProps and Per-page layout:
https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts#per-page-layouts
Dont know what other could cause this since we are using next/router many other places.

In the browser the error displays like this as when it renders on the server:

Server Error
Error: invariant expected app router to be mounted

[franky47]

Could it be that your getLayout function is called outside of a page render lifecycle? That could be an explanation as why the router is not available to nuqs hooks, if they are defined in the layout tree.

[BorghildSelle]

Maybe related to output singleton as we can import an singletonrouter, which then gives an router when i

import singletonRouter from 'next/router'
...
  useEffect(() => {
    if (singletonRouter) {
      console.log(singletonRouter)
    }
  }, [singletonRouter])

When i just use router = useRouter() is says:

NextRouter was not mounted.

[BorghildSelle]

We didnt get the error when conditionally render the react component with nuqs with !isServerRendered