Next.js Discord

Discord Forum

Build errors on my local machine: `Error: NextRouter was not mounted.`

Unanswered
Japanese Bobtail posted this in #help-forum
Open in Discord
Japanese BobtailOP
I've started getting build errors on my local environment. All of the static pages are failing to build, with the following errors:
Error occurred prerendering page "/404". Read more: https://nextjs.org/docs/messages/prerender-error
Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted

I've just installing 14.0.x, 14.1.x, and 14.2.x versions of Next.js, but all are failing with the same error.
Builds are still successfully building on our CI system.
We're using pages router, not the app router.
I'm running Node v18.17.0

38 Replies

Siamese Crocodile
hi
you need to use the router from next/navigation
with versoin 14
the one from next/router wont work
@Giant panda
ez
Japanese BobtailOP
We are using the pages router, not the app router
Giant panda
?
Siamese Crocodile
switch to the app router
Japanese BobtailOP
lmfao
one does not simply switch to the app router
Siamese Crocodile
where are you mounting the rouer
show me the code
post the full code
for the page thats breaking
@Japanese Bobtail
Japanese BobtailOP
What's confusing is that the build works fine on CI, and on my coworker's machine. It's just failing on mine.
I do believe the code is fine.
Siamese Crocodile
use docker?
Japanese BobtailOP
FWIW the 404 page, for example, is not even importing useRouter
Siamese Crocodile
what about
this
switch the page to use client
then you dont need to pre-render it
🙂
Japanese BobtailOP
Yeah we have a Dockerfile for our CI builds. I don't use it for my dev machine but I guess I could try that.
isn't "use client" a noop for pages router pages
We don't have an app directory at all
Also "use client" pages on app router are still pre-rendered fwiw
"use client" just means they just include the component(s) in client bundle and hydrate/run client-side as well.
Siamese Crocodile
"In Next.js, you can use the getServerSideProps function to fetch data at request time and disable pre-rendering for a specific page. When you use getServerSideProps, Next.js will not pre-render the page on the server-side. Instead, it will render the page on the server on every request and send the generated HTML to the client."
Japanese BobtailOP
but ty for trying to throw out ideas, i'm really scratching my head on this as well.
Yes that's right, I'm only experiencing this on our static pages
but turning them to dynamic pages by including a getServerSideProps fn is not a viable solution
Japanese BobtailOP
lol this is also happening for me on a barebone npx create-next-app -e reproduction-template-pages example template
something must be off with my system
Created a ticket: https://github.com/vercel/next.js/issues/65290