asPath in getInitialProps ignores query params in dev mode

[0x54321]

What version of Next.js are you using?

10.0.5

What version of Node.js are you using?

12.18.3

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

npm run dev

Describe the Bug

When using dev mode, the value of asPath in getInitialProps is correct only when rendered by the server. When rendered by the browser, only the path is included, and the query portion is ignored.

In prod (npm start), everything works as expected. This leads me to believe that there is some kind of race condition that surfaces only when the app is slowed down due to being in dev mode.

Expected Behavior

The value of asPath should consistently include the query portion both on the server and in the browser, even in dev mode.

To Reproduce

/pages/test1.js:

import { useRouter } from "next/router";

const Test1 = ({ asPath }) => {
  const router = useRouter();
  return (
    <div onClick={() => router.push("/test2", "/test2?foo=bar")}>
      go to /test2?foo=bar
      <br />
      <br />
      asPath = {asPath}
    </div>
  );
};

Test1.getInitialProps = ({ asPath }) => {
  return { asPath };
};

export default Test1;

/pages/test2.js:

import Link from "next/link";

const Test2 = ({ asPath }) => {
  return (
    <Link href="/test1" as="/test1?foo=bar">
      <div>
        go to /test1?foo=bar
        <br />
        <br />
        asPath = {asPath}
      </div>
    </Link>
  );
};

Test2.getInitialProps = ({ asPath }) => {
  return { asPath };
};

export default Test2;

Upon initial SSR render, navigating to /test1?foo=bar will correctly display the entire asPath. But after clicking "go to /test2?foo=bar," only /test2 is displayed, even though the actual path includes a query string.

Note that this happens both when using the Link component, as well as with router.push.

[kaykdm]

I can reproduce this issue.
I think it was working fine before this

I think the reason that this issue happens in only dev is

next.js/packages/next/build/webpack-config.ts

Line 216 in 699a7ae

const hasRewrites = rewrites.length > 0 || dev

Since a rewirte flag is on in dev, it goes through here where a query is not applied to the path

next.js/packages/next/next-server/lib/router/router.ts

Line 934 in 699a7ae

if (process.env.__NEXT_HAS_REWRITES && as.startsWith('/')) {

I am not sure why a rewrite flag is always true in dev.

[wweaver]

I'm getting a similar issue. For me I have rewrites set up and the asPath is returning the path with the pages infrastructure instead of the actual request url.

[kaykdm]

@wweaver
I think your issue is more likely to related to this #20370

[wweaver]

Thanks @kaykdm.

[ijjk]

Hi, this has been updated in the latest version of Next.js v10.0.6-canary.7, please upgrade and give it a try!

[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.