Cannot use default (singleton) router: "You should only use "next/router" on the client side of your app"

Hello! First of all thanks for awesome package, @scottrippey!

I try to mock next-router with storybook. Is it real to mock default Router as we do it for useRouter?

For instance useRouter works fine:

useRouter example

import { useCallback } from 'react'
import { useRouter } from 'next/router'

const UseRouterPage = () => {
  const router = useRouter()

  const handleClick = useCallback(() => router.push({
      pathname: router?.pathname,
      query: {
        ...router?.query,
        test: '1'
      },
    }, undefined,
    {
      scroll: false,
      shallow: true
    }), [])

  return (
    <main>
      <button onClick={handleClick}>button</button>
    </main>
  )
}

export default UseRouterPage

But with default exported Router, the next error appears:

I try use default exported Router because in this case there is no component re-render.

useRouter example

import { useCallback } from 'react'
import Router from 'next/router'

const RouterPage = () => {
  const handleClick = useCallback(() => Router.push({
    pathname: Router?.pathname,
    query: {
      ...Router?.query,
      test: '1'
    },
  }, undefined,
  {
    scroll: false,
    shallow: true
  }), [])

  return (
    <main>
      <button onClick={handleClick}>button</button>
    </main>
  )
}

export default RouterPage

Repo to reproduce: https://github.com/sedlukha/next-router-mock-example

[payable-saul-liang]

@amolagre I had the same ModuleNotFoundError error as you, but it seems to work by importing the next-12 version specifically:

import { MemoryRouterProvider } from "next-router-mock/MemoryRouterProvider/next-12";

[amolagre]

Hi @scottrippey , Any update to make next/link (12.2) working with storybook. I’m getting this error while running npm run storybook

ModuleNotFoundError: Module not found: Error: Can't resolve 'next/dist/next-server/lib/router-context' in 'my-project\node_modules\next-router-mock\dist\MemoryRouterProvider'