TypeError: Object(...) is not a function - with useRouter()

Bug report

Describe the bug

I am visiting a dynamic page. The page is a hook. The first line in the hook is const router = useRouter(). This works 9 out of 10 times, but sometimes it will say TypeError: Object(...) is not a function on this line. It happens sometimes when navigating to said page, but sometimes when loading the page fresh without navigating there.

To Reproduce

Unable to reproduce in fresh/external project, so I think something I am doing locally is breaking it, I am however unsure what specifically.

Local code example in project where it sometimes will not work:

/pages/levels/[dynamicPageSlug]/index.js

import { useRouter } from 'next/router'
import React from 'react';

export default function DynamicPage() {
  const router = useRouter()   // crashes here sporadically

  const {dynamicPageSlug} = router.query;

  if (!dynamicPageSlug)  { <p> loading </p>}

  return <p>{dynamicPageSlug}</p>
}

Is there anything that can happen elsewhere in the application which could invoke such behaviour? Thanks. I am also open to suggestions how to solve this kind of scenario better.

Expected behavior

It should not crash, but continue. It should give back the loading paragraph and continue clientside and print the slug.

System information

• OS: macOS
• Version of Next.js: 9.5.5
• Version of Node.js: Node 12

[leonardoanalista]

I accidentally upgraded react to version 17. It worked in my local “npm dev” also “npm build && npm start” but it failed to run at Vercel.

The way I fixed everywhere was to downgrade to version 16:

"react": "^16.7.0",
"react-dom": "^16.7.0"

[github-actions[bot]]

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.