next.js: Invalid HMR message..Error: No router instance found. ???

What version of Next.js are you using?

12.0.1

What version of Node.js are you using?

17.0.1

What browser are you using?

Chrome / Safari

What operating system are you using?

macOS

How are you deploying your application?

dev

Describe the Bug

While loading in locally developed npm packages, I get a weird warning in the console: [Warning] Invalid HMR message: {"action":"sync","hash":"","warnings":[],"errors":[]} Error: No router instance found. You should only use "next/router" on the client side of your app.

This current app is a test app that has no router instance anywhere, its just one page so the error doesn’t really make sense. The npm package is adding styles to the _app.tsx (global style) and an Icon component to the index.tsx file.

Chrome gives the same warning only on initial load but the warning goes away after that

Expected Behavior

The expected behaviour would be no hmr warning

To Reproduce

Not sure how others can reproduce the error since its kinda random

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 52
Comments: 42 (6 by maintainers)

Most upvoted comments

Its also strange cause I am not actually using the router at all in my test app 😕 like not once is useRouter called in the entire application…

snowytime on Nov 2, 2021

I am facing the same issue.

Next 12.0.2
MacOS 11.6
Firefox
Node 15.2.0

flowck on Nov 1, 2021

Hi, another case where this message could occur has been updated in v12.0.5-canary.8 of Next.js, please update and confirm whether this issue is still present.

ijjk on Nov 21, 2021

@ijjk console.warning is gone 😃 thx for the super fast and dedicated patch work, super appreciated 🏆

snowytime on Nov 21, 2021

@ijjk issue is persisting 😕

snowytime on Nov 19, 2021

I am facing the same issue. Even I comment all components in the index. And I never use “useRouter” in my project. This is really weird.

Node: v16.13.0
Next: 12.0.2
Browsers: Chrome
OS: Windows 11

tszhong0411 on Nov 5, 2021

For me, this is happening to the only page that doesn’t use useRouter() after hard refresh on the page.

Node: v16.13.0
Next: 12.0.2-canary.8
Browsers: Chrome, Brave
OS: Ubuntu Linux

skele2k on Nov 12, 2021

I have a slightly different error message but it seems similar. It happens only on AMP pages : export const config = { amp: true }

router.js?31fc:117 Uncaught Error: No router instance found.
You should only use "next/router" on the client side of your app.

    at getRouter (router.js?31fc:117)
    at Object.get (router.js?31fc:87)
    at eval (on-demand-entries-client.js?845c:46)

Edit (add versions): Node: 14.17.3 Next : 12.0.2 Browser: Chrome OS: Linux

slevy85 on Nov 2, 2021

I started running into the same issues tonight, and what was happening is this error appeared in my browser console, but I was also hitting server errors where it could not read my GraphQL schema. I just downgraded to next@12.0.0 (prev. next@12.0.2) and my site is working again.

brianlovin on Nov 2, 2021

Can confirm. Issue still present on 12.0.5-canary.4

abhinavkumar940 on Nov 19, 2021

Weird but for me on 12.0.3 the error goes away if I remove import "tailwindcss/tailwind.css" from my _app.tsx

This is also true for me. Next 12.0.2 Tailwindcss 2.2.19 Node 16.13.0 Mac OS 12.0 Chrome 96.0.4664.45

GitMazzone on Nov 18, 2021

Same. Using this framework is becoming a full-time job. The last upgrade trashed images loading times…

Using 12.0 got rid of that error and surfaced another: Module not found: ESM packages (./_root.js) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals.

This gets rid of it:

experimental: {esmExternals: 'loose'}

Then it’s trashed by another error…

WillSquire on Nov 16, 2021