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

kartikag01 · 2020-09-05T05:48:12Z

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

The text was updated successfully, but these errors were encountered:

olaj · 2020-09-06T10:57:38Z

I had the same issue. But i also had a backlog thing to update my "react-tiny-popover" (from 3 to 5). After i updated it (and fixed the breaking changes) this also seems to have been fixed.

timneutkens · 2020-09-06T15:10:58Z

Sounds like the context value is not passed through correctly in the external component you're using.

piotrzarycki · 2020-09-08T04:06:25Z

Will fix it :)

imdongchen · 2020-09-10T03:07:43Z

I can't reproduce the issue. Seems to work fine https://codesandbox.io/s/cannot-read-property-prefetch-and-push-of-null-16864-5kcj3

jdjam · 2020-09-10T03:42:08Z

I've been getting the same issue since v9.5(.0?) but with using sweetalert2-react-content v3.1.0

mikerid94 · 2020-09-10T15:20:44Z

I've been getting this error in my react-testing-library tests with v9.5 where I am using in the RouterContext

...
import { render } from '@testing-library/react';
import Router from 'next/router';
import { RouterContext } from 'next-server/dist/lib/router-context';
...
test('when I click the logo, I am taken to the home page', () => {
  const { getByTestId } = render(
    <RouterContext.Provider value={Router}>
      <Header />
    </RouterContext.Provider>,
  );
...
// trigger Link to be clicked -> "Cannot read property 'push' of null" error

I don't have the same error with 9.4.4

keubs · 2020-09-10T16:40:56Z

Seeing the same thing as soon as I install Next 9.5.3. For me, calling .simulate('click') on a Next link causes this error, but not on a standard anchor tag. See below:

  it('is a test', () => {
    const testSimulate = jest.fn();

    const link = mount(
      <Link href="/test" as="/test" prefetch>
        <a onClick={testSimulate}>test</a>
      </Link>
    );

    const anchor = link.find('a').at(0);

    act(() => {
      anchor.simulate('click');
    });
    expect(testSimulate).toHaveBeenCalled();
  });

output:

Summary of all failing tests
 FAIL  __tests__/components/utilities/TrackingLink.test.js (10.554s)
   <TrackingLink /> › is a test

    Error: Uncaught [TypeError: Cannot read property 'push' of null]

       97 |
       98 |     act(() => {
    >  99 |       anchor.simulate('click');
          |              ^
      100 |     });
      101 |     expect(testSimulate).toHaveBeenCalled();
      102 |   });

conversely, using a standard anchor tag:

  it('is a test', () => {
    const testSimulate = jest.fn();

    const link = mount(<a onClick={testSimulate}>test</a>);

    act(() => {
      link.simulate('click');
    });
    expect(testSimulate).toHaveBeenCalled();
  });

works fine. I dug into the entire stack trace and can't find a single call to .push(), which is probably the most baffling part to me.

juliosampaio · 2020-09-28T20:18:42Z

I've been getting this error in my react-testing-library tests with v9.5 where I am using in the RouterContext

...
import Router from 'next/router';
import { RouterContext } from 'next-server/dist/lib/router-context';
...
test('when I click the logo, I am taken to the home page', () => {
  const { getByTestId } = render(
    <RouterContext.Provider value={Router}>
      <Header />
    </RouterContext.Provider>,
  );
...
// trigger Link to be clicked -> "Cannot read property 'push' of null" error

I don't have the same error with 9.4.4

I'm facing the same issue here @mikerid94

Clement-Bresson · 2020-09-29T09:46:10Z

I experience the same error TypeError: Cannot read property 'push' of null

Not sure why though. It seems like sometimes router passed to linkClicked function in null here
I will try to dig into it.

[Edit]. I found that the link which triggers the bug, in my case, is located inside a ReactDOM.render (I parse some content and insert some React component in the middle of some elements, maybe I would need to do this differently but that's another story). And it seems inside this rendered component Next context is indeed not passed (or at least the router). Is there a way to manually give the router context for the next link inside to work ? (I found solution below to this question)

[Edit 2] @juliosampaio @mikerid94 I tried to pass the context as you are doing, but found that error is still hapenning because the Context is not the same. So in the link when router is grabbed from useRouter, it's still empty. Using RouterContext from next/dist/next-server/lib/router-context instead of from next-server/dist/lib/router-context worked for me. So edited solution working for me:

...  
import Router from 'next/router';  
import { RouterContext } from  'next/dist/next-server/lib/router-context';  
...  
ReactDOM.render(  
  <RouterContext.Provider value={Router}>  
     <Link /> // nextJS link  
   </RouterContext.Provider>  
 someElement  
)
...

// trigger Link to be clicked -> Working

It might help some people

mikerid94 · 2020-10-01T11:19:15Z

@Clement-Bresson
Using import { RouterContext } from 'next/dist/next-server/lib/router-context'; ends up with this error for me:

No router instance found.
You should only use "next/router" inside the client side of your app.

Note: I am using import { render } from '@testing-library/react'; instead of ReactDOM.render... from your example.

Regaddi · 2020-10-01T11:25:28Z

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

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

juliosampaio · 2020-10-01T13:22:30Z

I experience the same error TypeError: Cannot read property 'push' of null

Not sure why though. It seems like sometimes router passed to linkClicked function in null here
I will try to dig into it.

[Edit]. I found that the link which triggers the bug, in my case, is located inside a ReactDOM.render (I parse some content and insert some React component in the middle of some elements, maybe I would need to do this differently but that's another story). And it seems inside this rendered component Next context is indeed not passed (or at least the router). Is there a way to manually give the router context for the next link inside to work ? (I found solution below to this question)

[Edit 2] @juliosampaio @mikerid94 I tried to pass the context as you are doing, but found that error is still hapenning because the Context is not the same. So in the link when router is grabbed from useRouter, it's still empty. Using RouterContext from next/dist/next-server/lib/router-context instead of from next-server/dist/lib/router-context worked for me. So edited solution working for me:
...  
import Router from 'next/router';  
import { RouterContext } from  'next/dist/next-server/lib/router-context';  
...  
ReactDOM.render(  
  <RouterContext.Provider value={Router}>  
     <Link /> // nextJS link  
   </RouterContext.Provider>  
 someElement  
)
...

// trigger Link to be clicked -> Working
It might help some people

I can confirm it worked for me as well @Clement-Bresson , thanks!

danbergelt · 2020-10-08T21:59:54Z

@Clement-Bresson
Using import { RouterContext } from 'next/dist/next-server/lib/router-context'; ends up with this error for me:
No router instance found.
You should only use "next/router" inside the client side of your app.
Note: I am using import { render } from '@testing-library/react'; instead of ReactDOM.render... from your example.

+1, experiencing all of the above issues when combining React Testing Library and the Link component. Having to fall back on Cypress, which is suboptimal for integration tests IMO.

olaj · 2020-11-25T10:45:23Z

My tests are failing now for more or less each <Link> in Jest tests that i run against "pages". Just wanted to see if anyone else has starting to see this (again) and having a quick fix.

It happened after an upgrade to 10.0.2 (or 10.0.3), it works fine in 10.0.1. Seems to be alot of talk about prefetching in the changelog so maybe one of those PR is to blame.

To busy to dig into some reproduction at the moment and i will just skip my tests for now, and probably movre these more complicated tests to cypress instead.

justincy · 2020-11-25T17:06:55Z

@olaj I'm seeing the same. Tests work fine in 10.0.1 but fail with this prefetch null error in 10.0.3.

I'm using react-testing-library. I don't use router-context.

justincy · 2020-11-25T17:09:52Z

This is the problematic line that my tests are complaining about:

next.js/packages/next/client/link.tsx

Line 49 in 397a375

router.prefetch(href, as, options).catch((err) => {

That method is called from here:

next.js/packages/next/client/link.tsx

Line 264 in 397a375

prefetch(router, href, as, {

The code was added in this PR: #18904

justincy · 2020-11-25T17:19:08Z

The solution from @Regaddi to mock next/link fixed my test failures.

AustinShelby · 2020-11-26T14:38:32Z

I had a different error message Error: Uncaught [TypeError: Cannot read property 'catch' of undefined] but also from the <Link>.

I managed to fix it by mocking my router like this:

import React, { ReactElement } from "react";
import { render, RenderResult } from "@testing-library/react";
import { NextRouter } from "next/router";
import "@testing-library/jest-dom";
import { RouterContext } from "next/dist/next-server/lib/router-context";

export const mockRouter: NextRouter = {
  basePath: "",
  pathname: "/",
  route: "/",
  asPath: "/",
  query: {},
  push: jest.fn(),
  replace: jest.fn(),
  reload: jest.fn(),
  back: jest.fn(),
  prefetch: jest.fn().mockResolvedValue(undefined),  // This one fixed it for me
  beforePopState: jest.fn(),
  events: {
    on: jest.fn(),
    off: jest.fn(),
    emit: jest.fn(),
  },
  isFallback: false,
};

export const renderWithRouter = (component: ReactElement): RenderResult => {
  return render(
    <RouterContext.Provider value={mockRouter}>
      {component}
    </RouterContext.Provider>
  );
};

and then in my tests, I call renderWithRouter instead of render.

mikerid94 · 2020-11-27T18:57:48Z

The failing tests that were throwing this sort of error was pinning my project at Nextv9.4 so I made a stripped back repo to cover all the router tests I needed for Nextv10.

testing Link component (commit)
tests with useRouter (commit)
programatically calling Router.push() (e.g. in a redux-saga) (commit)

The router mock I ended up with was very similar to @AustinShelby's:

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

export const routerMock = {
  basePath: "",
  pathname: "/",
  route: "/",
  asPath: "/",
  query: {},
  push: jest.fn().mockResolvedValue(true),
  replace: jest.fn().mockResolvedValue(true),
  reload: jest.fn(),
  back: jest.fn(),
  prefetch: jest.fn().mockResolvedValue(undefined),
  beforePopState: jest.fn(),
  events: {
    on: jest.fn(),
    off: jest.fn(),
    emit: jest.fn(),
  },
  isFallback: false,
};

...
  render(
    <RouterContext.Provider value={routerMock}>
      <Component />
    </RouterContext.Provider>
  );
...

gko · 2020-12-05T15:22:13Z

I was able to work around the issue by mocking next/link instead of next/router:
jest.mock('next/link', () => ({ children }) => children);

Thank you for solution. A better way of mocking Link in case you want to check href attribute in tests as well:

jest.mock('next/link', () => {
  const React = require('react');
  const { UrlObject } = require('url');

  type Url = string | typeof UrlObject;
  type LinkProps = {
    href: Url;
    as?: Url;
  };

  return ({ children, href }: React.PropsWithChildren<LinkProps>) =>
    React.cloneElement(React.Children.only(children), { href });
});

FYI as of next 10 as attribute is not necessary anymore.

hems · 2020-12-10T01:39:34Z

Any ideas on how to solve this issue on StoryBook ??

We have created a separate issue but it issue got closed as duplicated of this issue

Thank You!

tiaanduplessis · 2020-12-12T11:36:09Z

@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>
  ),
];

@see vercel/next.js#16864 for more informations about next Link component breaking in a test environment

MontoyaAndres · 2021-01-05T23:06:48Z

same issue as @mikerid94 in version 10.0.1 this error does not exist

Fixes #16864 The `router` can be missing in a test environment when trying to render a `Link` component. This PR bails out of `router.prefetch()` when `router` is missing. The alternative is for users to mock `next/link` or to mock the `router` and wrap their test components. Please let me know any feedback.

eric-burel · 2021-01-08T17:20:50Z

If I get it right, mocking next/router package using a Webpack alias as usual is not enough, because it won't mock the version used by next/link, am I right?
I am not fond of mocking next/link either, that affects stories too much.
So @tiaanduplessis solution is great.

Reading code from the PR #18904 I don't get why it broke suddenly though

damusnet · 2021-01-08T17:48:21Z

@eric-burel I don't know about using Webpack aliases.

What happened when it broke is that a feature was introduced that tries to prefetch any internal url as soon as <Link /> is mounted by default. This used to be disabled by default, and the default was switched if I remember correctly. The issue is that in stories and tests, the <Link /> component is used in isolation, outside the Next.js app, and outside of the Router context which provides the prefetch function.

In any case, I submitted a patch #19857 that was just merged this week and is included in the latest release v10.0.5 yesterday, so upgrading to that version should fix it in both tests and stories. Let me know if that is not the case.

eric-burel · 2021-01-09T10:26:34Z

I was using Webpack alias to mock imports from next/router in my app. But since next/link is already built I guess it's too late, the mock is not applied.

I think the blame is not really in Next, but actually in end-user Storybook install. It's perfectly normal to have to setup a decorator to make a framework work (eg loading Material UI theme, adding i18n, loading app global context, etc. etc.)., Next is no exception.

So @tiaanduplessis is not only just a quickfix but actually a decorator we may want to have in our Next/Storybook apps to mock the router in any case.
I've updated #19345 so it can become a part of @next/plugin-storybook. The decorator could also be exposed on its own by Next (loading @next/plugin-storybook creates all sort of issues) from this package for easier adoption.

eric-burel · 2021-08-30T14:24:02Z

Update for Storybook: you can now use this awesome plugin: https://storybook.js.org/addons/storybook-addon-next-router
It works very well and let's you tweak the router mock using parameters of the story, for easy testing of readyness, query params, links...

balazsorban44 · 2022-01-27T22:05:27Z

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

timneutkens added the good first issue Easy to fix issues, good for newcomers label Sep 6, 2020

Timer added the kind: story label Sep 8, 2020

damusnet mentioned this issue Dec 4, 2020

Only prefetch Link if router is in context #19857

Merged

tifa2UP mentioned this issue Dec 7, 2020

Add Next 10 storybook support quran/quran.com-frontend-next#110

Merged

timneutkens mentioned this issue Dec 8, 2020

Cannot read property 'prefetch' of null error on StoryBook #19825

Closed

luizeboli added a commit to ufersa/plataforma-sabia that referenced this issue Jan 4, 2021

test(web): add next router mock to jest setup

b21d793

@see vercel/next.js#16864 for more informations about next Link component breaking in a test environment

Timer added this to the backlog milestone Jan 6, 2021

kodiakhq bot closed this as completed in #19857 Jan 6, 2021

Timer modified the milestones: backlog, iteration 15 Jan 6, 2021

eric-burel mentioned this issue Jan 9, 2021

@next/plugin-storybook issues #19345

Closed

7 tasks

meotimdihia mentioned this issue Jul 6, 2021

Next/Link isn't working. sweetalert2/sweetalert2-react-content#172

Closed

Eddges mentioned this issue Jul 19, 2021

Week 2 tests ooni/probe-desktop#233

Merged

vercel locked as resolved and limited conversation to collaborators Jan 27, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

kartikag01 commented Sep 5, 2020 •

edited

olaj commented Sep 6, 2020

timneutkens commented Sep 6, 2020

piotrzarycki commented Sep 8, 2020

imdongchen commented Sep 10, 2020

jdjam commented Sep 10, 2020

mikerid94 commented Sep 10, 2020 •

edited

keubs commented Sep 10, 2020 •

edited

juliosampaio commented Sep 28, 2020

Clement-Bresson commented Sep 29, 2020 •

edited

mikerid94 commented Oct 1, 2020 •

edited

Regaddi commented Oct 1, 2020

juliosampaio commented Oct 1, 2020

danbergelt commented Oct 8, 2020

olaj commented Nov 25, 2020 •

edited

justincy commented Nov 25, 2020

justincy commented Nov 25, 2020 •

edited

justincy commented Nov 25, 2020

AustinShelby commented Nov 26, 2020

mikerid94 commented Nov 27, 2020

gko commented Dec 5, 2020 •

edited

hems commented Dec 10, 2020 •

edited

tiaanduplessis commented Dec 12, 2020

MontoyaAndres commented Jan 5, 2021

eric-burel commented Jan 8, 2021

damusnet commented Jan 8, 2021 •

edited

eric-burel commented Jan 9, 2021 •

edited

eric-burel commented Aug 30, 2021

balazsorban44 commented Jan 27, 2022

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

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

Comments

kartikag01 commented Sep 5, 2020 • edited

Bug report

Describe the bug

To Reproduce

Expected behavior

Screenshots

System information

Additional context

olaj commented Sep 6, 2020

timneutkens commented Sep 6, 2020

piotrzarycki commented Sep 8, 2020

imdongchen commented Sep 10, 2020

jdjam commented Sep 10, 2020

mikerid94 commented Sep 10, 2020 • edited

keubs commented Sep 10, 2020 • edited

juliosampaio commented Sep 28, 2020

Clement-Bresson commented Sep 29, 2020 • edited

mikerid94 commented Oct 1, 2020 • edited

Regaddi commented Oct 1, 2020

juliosampaio commented Oct 1, 2020

danbergelt commented Oct 8, 2020

olaj commented Nov 25, 2020 • edited

justincy commented Nov 25, 2020

justincy commented Nov 25, 2020 • edited

justincy commented Nov 25, 2020

AustinShelby commented Nov 26, 2020

mikerid94 commented Nov 27, 2020

gko commented Dec 5, 2020 • edited

hems commented Dec 10, 2020 • edited

tiaanduplessis commented Dec 12, 2020

MontoyaAndres commented Jan 5, 2021

eric-burel commented Jan 8, 2021

damusnet commented Jan 8, 2021 • edited

eric-burel commented Jan 9, 2021 • edited

eric-burel commented Aug 30, 2021

balazsorban44 commented Jan 27, 2022

kartikag01 commented Sep 5, 2020 •

edited

mikerid94 commented Sep 10, 2020 •

edited

keubs commented Sep 10, 2020 •

edited

Clement-Bresson commented Sep 29, 2020 •

edited

mikerid94 commented Oct 1, 2020 •

edited

olaj commented Nov 25, 2020 •

edited

justincy commented Nov 25, 2020 •

edited

gko commented Dec 5, 2020 •

edited

hems commented Dec 10, 2020 •

edited

damusnet commented Jan 8, 2021 •

edited

eric-burel commented Jan 9, 2021 •

edited