Next.js Discord

Discord Forum

"Error: NextRouter was not mounted" in Next 14.1 with `npm run build` and `output: 'export'`

Unanswered
Egyptian Mau posted this in #help-forum
Open in Discord
Egyptian MauOP
The entire error trace:
Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted
at h (/app/.next/server/chunks/6.js:1:20278)
at eU (/app/.next/server/chunks/922.js:1:42690)
at renderWithHooks (/app/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
at renderIndeterminateComponent (/app/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
at renderElement (/app/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
at renderNodeDestructiveImpl (/app/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
at renderNodeDestructive (/app/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
at renderNode (/app/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
at renderChildrenArray (/app/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
at renderNodeDestructiveImpl (/app/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)

This worked on Next12, I am in the middle of upgrading to Next14 and am hitting this issue, still using the Pages Router.

90 Replies

Plott Hound
Show me the import for next router pls
Jesse
Oh I got this problem today
Egyptian MauOP
import { useRouter } from 'next/router', I have tried the suggestion from the gpt-help channel and used import { useRouter } from 'next/navigation', that doesn't work either, seemingly because I'm not using the app directory?
Plott Hound
App router is import { useRouter } from 'next/navigation'
Plott Hound
Jesse you wanna take this?
Egyptian MauOP
Yes, I am using the pages router.
Egyptian MauOP
Error: invariant expected app router to be mounted is the new error if I switch over to 'next/navigation'.
@Plott Hound Jesse you wanna take this?
Jesse
I’ll ping you if I can’t fix it
Or just the general code using the router
Egyptian MauOP
I have it in quite a few places doing different things, just to pick one at random...
  const router = useRouter()
  const isHomepage = router.pathname === '/'
Should I be using the new pathname hook? I thought that was for the app router.
Egyptian MauOP
What do you mean?
@Egyptian Mau What do you mean?
Jesse
I don’t think it’s the use case causing the bug
Can you just give me a list of the different things you put after router for example pathname
Egyptian MauOP
Jesse
Are you creating your router instance at the top of your component stuff
Egyptian MauOP
It's in the function component body before the return of the jsx.
This isn't an error where I'm trying to use a hook somehwhere I can't, all of this code worked in Next12 and none of it has changed just the Next version upgrade.
That’s good to know
You’ve tried using next/navigation
Egyptian MauOP
I did, I'm not using the app router so I don't think that's the issue...
Jesse
Weird because I got the same error when I used next/router instead of navigation
You’re passing the router as a prop?
Or are you creating multiple instances
Egyptian MauOP
Multiple instances meaning more than one place with useRouter()?
And no, I don't think I'm passing it as a prop anywhere.
Egyptian MauOP
Why would it matter if it were passed as a prop?
Egyptian MauOP
So when you said you fixed this yoursele earlier today... you did that by changing to import { useRouter } from 'next/navigation' inside the Pages router?
Egyptian MauOP
@Plott Hound help?
@Egyptian Mau And no, I don't think I'm passing it as a prop anywhere.
Jesse
Probably multiple instances
Egyptian MauOP
Okay, so different situation I guess since I am using Pages.
I'm not sure what you mean multiple instances.
Jesse
Do that find all thing for useRouter()
Egyptian MauOP
If anything the error implies there are no instances...
Egyptian MauOP
I did, I sent you a screenshot of that.
Jesse
Because it says router not mounted
However I got that error when I had an instance of router
@Egyptian Mau I'm not sure what you mean multiple instances.
Jesse
Multiple places where you call use useRouter
Egyptian MauOP
I'm using it in 6 places, two on a top level page componet, three in components that appear on every page, and once to compose a custom hook (which is used two places, none of which overlap with the direct useRouter calls).
Plott Hound
Can you try removing each instance of use router and its imports one file at a time and see if it stems from one particular usage?
Egyptian MauOP
Yeah... I guess I can do that.
Plott Hound
Also do a search for next/navigation to make sure all your imports are correct
Since you’re using pages router
Egyptian MauOP
next/navigation is not in my project.
Plott Hound
Ok we can rule that out
Hopefully the error is from a particular use, maybe we can find a pattern
Start with things that aren’t router.push
Egyptian MauOP
Okay... I've commented out every instance of useRouter in the entire project and now the build still fails every single page with Error: <Html> should not be imported outside of pages/_document., which I guarantee you I am not doing.
Jesse
I know this is tedious but is moving to app router a viable option
Egyptian MauOP
It's possible but I'd rather not if I don't absolutely have to.
This is an app that's supposed to go live in the next month, getting all of that work done and reviewed is going to make that hard...
App router is a potential phase II of this project.
And unless I can come up with a concrete, documentable reason I can't just go to my bosses and say "Next13/14 mysteriously stopped supporting the way we're exporting our app."
Jesse
Yeah sorry I know it’s not optimal
But App router does have its advantages
Egyptian MauOP
Such as?
Because right it sounds like moving hoping that it fixes a bug I can't even explain why is happening all of the sudden.
This is a statically exported app/site, I do not need any of the server functionality that App Router adds.
@Egyptian Mau Such as?
Jesse
Just better DX and nicer to use in general
If you’re consistent on using pages maybe try #gpt-help because I don’t know how to help you
Egyptian MauOP
I appreciate you trying to help, I'm sorry if I'm coming off a little grouchy — I'm just very frustrated with the code after getting stuck on this for days. I tried asking the ai bot, it wasn't a ton of help either.
Jesse
Yeah, I see where you're coming from, I had this really annoying bug which came from me upgrading to Next 14.0.2 to 14.0.3 and I was as frustrated as you were. It's annoying when bugs come from just changing the version and not the code.
Egyptian MauOP
Yeah, I tried that yesterday too. It was only ever imported in the _document component, I even tried deleting that component and I got the same erorr.
Jesse
This is the weirdest thing ever
This is still open
They only fixed it by reverting to 13.4.7
Egyptian MauOP
This is the error I'm seeing but this, at leat accord to the repro steps, seems to be around experimental-edge. Definitely possible its not just that.
@Egyptian Mau I know this is tedious but so we know exactly where the issue is can you go down versions until it works
Egyptian MauOP
Ah, yeah, that seems to be it.
@Egyptian Mau Ah, yeah, that seems to be it.
Jesse
That one's also still open
Yeah look at this response https://github.com/vercel/next.js/issues/56481#issuecomment-1749849151
This could be a solution https://github.com/vercel/next.js/issues/56481#issuecomment-1755369676
Removing this from .env NODE_ENV=development
Egyptian MauOP
Hmm. I'll try that, one of the places this isn't working anymore has NODE_ENV=test, possibly still the same issue though.
Our app is a freaking onion, there's so many layers going on here with docker and such... it takes a minute to apply these config-level change and rebuild everything.
Egyptian MauOP
I... well, I really have no idea what just happened. I blew away some of my changes from yesterday and now everything is just working as it was, which is the weirdest thing ever. I tried this several times yesterday as well and it wasn't the fix then, I have no idea what's going on with the code right now.
This is almost more frustrating because I have no idea what caused this and made me waste an entire afternoon on it or how to avoid it again in the future, but I guess on the bright side everything is working and I'm unblock. Again, I appreciate you help and I'm sorry that I was rude about any of this.
Orange-tailed bumble bee
@Egyptian Mau I have exactly the same issue what you have. The but what in my situation the problem solved is the NODE_ENV we had a next build with a NODE_ENV of development and that was for us the problem! After setting the NODE_ENV to production the problem had solved.