Console error "Loading initial props cancelled” after redirecting inside getInitialProps on client side

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #202201092355 SMP PREEMPT Mon Jan 10 00:21:11 UTC 2022
Binaries:
  Node: 16.13.1
  npm: 8.18.0
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 12.3.0
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

I got the console error "Loading initial props canceled” after redirecting inside getInitialProps on the client side

import React from "react";
import Router from "next/router";

const TestPage = () => {
	return <div>Test Page</div>
}

TestPage.getInitialProps = context => {
	const { req, res } = context;
	if (req) {
                res.writeHead(302, { Location: '/other' })
                res.end();
	} else {
		Router.push("/other");
	}
	return {}
}

export default TestPage;

Expected Behavior

Not getting error in console

Link to reproduction

https://codesandbox.io/s/eloquent-thompson-rkn897

To Reproduce

run app
go to /
open console
click on “Go to TEST PAGE” link

Issue Analytics

State:
Created a year ago
Reactions:11
Comments:6 (3 by maintainers)

Top GitHub Comments

4reactions

Ajmaljalalcommented, Oct 5, 2022

I have the same issue and it was introduced after I added getServerSideProps to my page. I am doing an API call and returning the response:

export const getServerSideProps = async ({ req }) => { const posts = await getAllFeedPosts(req) return { props: { posts } } }

1reaction

kjellskicommented, Nov 1, 2022

I’m having the same problem:

I’ve got a query params-based state that should be changed after a select value was changed. And this error occurs regularly - not all the time though.

I’m navigating to /foo and changing the input, which should set the bar parameter to baz, so we should end up at /foo?bar=baz.

Is anyone working on this already?

Top Results From Across the Web

What is the cause of "Loading initial props cancelled" in Nextjs?

We have determined that the error comes from the _getData<T> method in router.ts but haven't been able to figure out the cause nor...

getInitialProps - Data Fetching - Next.js

For the initial page load, getInitialProps will run on the server only. getInitialProps will then run on the client when navigating to a...

Testing and error handling patterns in Next.js - LogRocket Blog

This article aims to reveal the different ways to run tests and handle errors in a Next.js application through the following sections:.

What is Next.js getInitialProps and getServerSideProps? | refine

getInitialProps will run on the server during the initial page load and, subsequently, run in the browser if you make client-side transition to ......

8.0.4 - next - npm

For the initial page load, getInitialProps will execute on the server ... The router instance should be only used inside the client side...