router.isReady is not working correctly with React 18

[iuzn]

Verify canary release

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

Provide environment information

Operating System:
  Platform: OSX
  Arch: ARM
  Version: MacOS Monterey
Binaries:
  Node: 16.14.0
  npm: N/A
  Yarn: N/A
  pnpm: 6.32.3
Relevant packages:
  next: 12.1.3-canary.4
  react: 18.0.0
  react-dom: 18.0.0

What browser are you using? (if relevant)

Chrome 101.0.4951.15

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

When I boot the next.js project in local with React 18, router.isReady returns false if the URL has a query value. When I deploy the project with Vercel, there is no such problem. The problem only occurs in local.

Expected Behavior

The isReady query returns true when the page is loaded if the project is started in localhost.

To Reproduce

Example code:

import { useRouter } from 'next/router'
import {useEffect, useState} from "react";

export default function Home() {
    const router = useRouter()

    const [isReady, setIsReady] = useState(router.isReady)
    const [hasMounted, setHasMounted] = useState(false)

    // Set router.isReady when the page has mounted
    useEffect(() => {
        setIsReady(router.isReady)
    }, [router])

    // Blocking hydration warning
    useEffect(() => {
        setHasMounted(true)
    }, [])
    if (!hasMounted) {
        return null
    }

    const addQuery = (query) => {
        router.push({
            pathname: '/',
            query: query ? {query: query} : null
        }).then(()=>router.reload())
    }
    return (
        <div>
        <h2>{ isReady ? "Route is ready" : "Route is not ready"}</h2>
        <button onClick={()=>addQuery("1okok3mkn3mjf7f")}>Add query to url</button>
        <button onClick={()=>addQuery(null)}>Delete query from url</button>
        </div>
    )
}

[devknoll]

Could you please provide a full reproduction (via GitHub or CodeSandbox)? I tried your example using the versions specified and I'm seeing Route is ready rendered when running locally (both via next dev and next build + next start).

[iuzn]

I don't understand why this problem is caused. router.isReady works fine in some cases. But it doesn't work properly in local.

I prepared a sample project on GitHub: https://github.com/iuzn/next-router-with-react-18

CodeSandbox: https://codesandbox.io/s/next-router-with-react-18-eu4r7u

I'm wondering where I went wrong. I've been checking everything one by one for hours.

[ijjk]

Hi, I was able to reproduce this with the above repo, the next.config.js being present seemed to be an important part, thanks for providing that! A fix for this has been opened here #35762

[ijjk]

Hi, this has been updated in the latest version of Next.js v12.1.4-canary.1, please update and give it a try!

[iuzn]

Yes, I updated. It now works properly. Thanks, @ijjk

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.