Cannot read property 'prefetch' and 'push' of null

Bug report

Cannot read property ‘prefetch’ and ‘push’ of null

This bug starts coming when I updated the next version from 9.1.4 to 9.5.2 for both production and dev build.

Describe the bug

Cannot read property ‘prefetch’ of null Cannot read property ‘push’ of null

Uncaught TypeError: Cannot read property 'prefetch' of null
    at prefetch (link.tsx?5e4b:98)
    at eval (link.tsx?5e4b:279)
    at eval (link.tsx?5e4b:60)
    at Array.forEach (<anonymous>)
    at IntersectionObserver.rootMargin (link.tsx?5e4b:51)

link.tsx?5e4b:144 Uncaught TypeError: Cannot read property 'push' of null
    at linkClicked (link.tsx?5e4b:144)
    at onClick (link.tsx?5e4b:314)
    at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:385)
    at invokeGuardedCallback (react-dom.development.js?61bb:440)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js?61bb:454)
    at executeDispatch (react-dom.development.js?61bb:584)
    at executeDispatchesInOrder (react-dom.development.js?61bb:606)
    at executeDispatchesAndRelease (react-dom.development.js?61bb:713)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js?61bb:722)
    at forEachAccumulated (react-dom.development.js?61bb:694)
    at runEventsInBatch (react-dom.development.js?61bb:739)
    at runExtractedPluginEventsInBatch (react-dom.development.js?61bb:880)
    at handleTopLevel (react-dom.development.js?61bb:5803)
    at batchedEventUpdates$1 (react-dom.development.js?61bb:24401)
    at batchedEventUpdates (react-dom.development.js?61bb:1415)
    at dispatchEventForPluginEventSystem (react-dom.development.js?61bb:5894)
    at attemptToDispatchEvent (react-dom.development.js?61bb:6010)
    at dispatchEvent (react-dom.development.js?61bb:5914)
    at unstable_runWithPriority (scheduler.development.js?3069:697)
    at runWithPriority$2 (react-dom.development.js?61bb:12149)
    at discreteUpdates$1 (react-dom.development.js?61bb:24417)
    at discreteUpdates (react-dom.development.js?61bb:1438)
    at dispatchDiscreteEvent (react-dom.development.js?61bb:5881)

To Reproduce

it’s coming when Link Tag is used in the Popover element (https://react-bootstrap-v3.netlify.app/components/popovers/)

 <OverlayTrigger
    overlay={(
      <Popover id="popover-saved-item">
        <Link href="/shopping-cart">
          <a><h5>Your Saved Items wishlist</h5></a>
        </Link>
      </Popover>
      )}
  >
Click Popover
  </OverlayTrigger>

Click on

Expected behavior

the error should not be there.

Screenshots

System information

• Version of Next.js: [e.g. 9.5.2]
• Version of Node.js: [e.g. 10.16.0]

Additional context

When I add prefetch={false} to link then the prefetch error doesn`t come while rendering but push error is still there on click of the Link

[Regaddi]

I was able to work around the issue by mocking next/link instead of next/router:

jest.mock('next/link', () => ({ children }) => children);

[tiaanduplessis]

@hems updating .storybook/preview.js to the following worked for our use case

import React from "react"; 
import { RouterContext } from  'next/dist/next-server/lib/router-context';  

export const decorators = [
  (Story) => (
    <RouterContext.Provider value={{
      push: () => Promise.resolve(),
      replace: () => Promise.resolve(),
      prefetch: () => Promise.resolve()
    }}>  
      <Story />
    </RouterContext.Provider>
  ),
];