Error: No router instance found when calling Router.push in getInitialProps function

[duyphanz]

Examples bug report

Example name

with-cookie-auth

Describe the bug

Get error when trying to call Router.push in getInitialProps function

To Reproduce

1. yarn build
2. yarn start
3. Enter: http://localhost:3000/profile

Screenshots

IMHO, we're missing return statement after make redirection in server side.

ref: https://github.com/zeit/next.js/blob/9defdd0a18cbf6dab4adabe6efc07885528b947e/examples/with-cookie-auth/utils/auth.js#L20

[jamesmosier]

Do you have any other reproduction steps for this @phanduy12214 ? I cloned the example and followed your steps, but I did not see the error you referenced.

I even went as far as to force these lines to be called (by removing the !token check) and still I was not able to reproduce.

[Parrakh]

I have the same problem, but with an other background. I used Redux and combined it with the cookie auth, but it fails on the same issue.

The problem exists if i had a custom "getInitialProps" in the _app.js file. Like https://github.com/zeit/next.js/blob/canary/examples/with-redux-saga/pages/_app.js#L10

If i delete the custom "getInitialProps", it works very well, but my redux has stopped working.

[jamesmosier]

If you change this line to if (!token && typeof window !== 'undefined') does the error go away?

If so, the next step would be to log out the result of ctx.req to understand why on the client side that has a value.

[duyphanz]

Hi @jamesmosier,

Thanks for your time spent on investigation.

You can try to call Router.push in getInitialProps function directly. The error will occur in the Server side rendering process (not sure why the error stack logs showed in browser sometimes and terminal other times).

As the error info, they said You should only use "next/router" inside the client side of your app.. But in the with-cookie-auth example, the Router.push is called in SSR process as well due to missing return statement after checking token existing done on server side.

 /*
   * If `ctx.req` is available it means we are on the server.
   * Additionally if there's no token it means the user is not logged in.
   */
  if (ctx.req && !token) {
    ctx.res.writeHead(302, { Location: '/login' })
    ctx.res.end()
    return; // should be added IMO.
  }

  // We already checked for server. This should only happen on client.
  if (!token) {
    Router.push('/login')
  }

  return token

[rifkyr203]

yes same with me

[jamesmosier]

Try cloning this fork and see if that resolves your issue (branch name is mosier/fix-issue-9312). If it does, I'll open up a PR for this change.

I adjusted the logic in the auth function to be:

  // If there's no token, it means the user is not logged in.
  if (!token) {
    if (ctx.req) {
      // If `ctx.req` is available it means we are on the server.
      ctx.res.writeHead(302, { Location: '/login' })
      ctx.res.end()
    } else {
      // This should only happen on client.
      Router.push('/login')
    }
  }

return token;

[duyphanz]

@jamesmosier LGTM!

[wenlittleoil]

Try cloning this fork and see if that resolves your issue (branch name is mosier/fix-issue-9312). If it does, I'll open up a PR for this change.

I adjusted the logic in the auth function to be:

  // If there's no token, it means the user is not logged in.
  if (!token) {
    if (ctx.req) {
      // If `ctx.req` is available it means we are on the server.
      ctx.res.writeHead(302, { Location: '/login' })
      ctx.res.end()
    } else {
      // This should only happen on client.
      Router.push('/login')
    }
  }

return token;

Hi @jamesmosier,

Thanks for your time spent on investigation.

You can try to call Router.push in getInitialProps function directly. The error will occur in the Server side rendering process (not sure why the error stack logs showed in browser sometimes and terminal other times).

As the error info, they said You should only use "next/router" inside the client side of your app.. But in the with-cookie-auth example, the Router.push is called in SSR process as well due to missing return statement after checking token existing done on server side.

 /*
   * If `ctx.req` is available it means we are on the server.
   * Additionally if there's no token it means the user is not logged in.
   */
  if (ctx.req && !token) {
    ctx.res.writeHead(302, { Location: '/login' })
    ctx.res.end()
    return; // should be added IMO.
  }

  // We already checked for server. This should only happen on client.
  if (!token) {
    Router.push('/login')
  }

  return token

Hi @jamesmosier,

Thanks for your time spent on investigation.

You can try to call Router.push in getInitialProps function directly. The error will occur in the Server side rendering process (not sure why the error stack logs showed in browser sometimes and terminal other times).

As the error info, they said You should only use "next/router" inside the client side of your app.. But in the with-cookie-auth example, the Router.push is called in SSR process as well due to missing return statement after checking token existing done on server side.

 /*
   * If `ctx.req` is available it means we are on the server.
   * Additionally if there's no token it means the user is not logged in.
   */
  if (ctx.req && !token) {
    ctx.res.writeHead(302, { Location: '/login' })
    ctx.res.end()
    return; // should be added IMO.
  }

  // We already checked for server. This should only happen on client.
  if (!token) {
    Router.push('/login')
  }

  return token

In my case, ctx.redirect doesn't work, but ctx.res.writeHead does. Thanks for your answer.

[YuriFontella]

Try cloning this fork and see if that resolves your issue (branch name is mosier/fix-issue-9312). If it does, I'll open up a PR for this change.

I adjusted the logic in the auth function to be:

  // If there's no token, it means the user is not logged in.
  if (!token) {
    if (ctx.req) {
      // If `ctx.req` is available it means we are on the server.
      ctx.res.writeHead(302, { Location: '/login' })
      ctx.res.end()
    } else {
      // This should only happen on client.
      Router.push('/login')
    }
  }

return token;

Router might be able to identify whether it is on the server or client side when redirecting?

[balazsorban44]

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.