Annoying Error: "invariant expected app router to be mounted"

I am using the Simple Next.js template which uses Vercel Postgres as the database and Kysely as the query builder.

After completing all the setup steps, I encountered the following error when running pnpm dev:

 pnpm dev

> postgres-drizzle@0.0.0 dev C:\Users\sec\Desktop\postgres-drizzle
> next dev

  ▲ Next.js 13.5.4
  - Local:        http://localhost:3000
  - Environments: .env.development.local

 ✓ Ready in 2.5s
Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
 ✓ Compiled /page in 2.1s (780 modules)
 ⨯ Error: invariant expected app router to be mounted
    at RefreshButton (./components/refresh-button.tsx:14:78)
 ✓ Compiled in 260ms (258 modules)
 ⨯ Error: invariant expected app router to be mounted
    at RefreshButton (./components/refresh-button.tsx:14:78)
 ✓ Compiled /favicon.ico/route in 801ms (39 modules)

components\refresh-button.tsx

'use client'

import { useRouter } from 'next/navigation'
import { useTransition } from 'react'

export default function RefreshButton() {
 const router = useRouter()
 const [isPending, startTransition] = useTransition()

 return (
   <button
     className={`${
       isPending ? 'cursor-not-allowed text-gray-400' : ''
     } text-sm text-gray-500 hover:text-gray-900`}
     disabled={isPending}
     onClick={() => {
       startTransition(() => {
         router.refresh()
       })
     }}
   >
     {isPending ? 'Refreshing...' : 'Refresh'}
   </button>
 )
}

Start with components/refresh-button.tsx, then reproduce the issue by running pnpm dev in the Simple Next.js template. Check how the button is rendered relative to the app router; done when the template runs without the “invariant expected app router to be mounted” error.