Next.js Discord

Discord Forum

Critical bug in NextJS v14.2.7 - renders page source code instead of components

Unanswered
Chalcid wasp posted this in #help-forum
Open in Discord
Chalcid waspOP
I have created my app in NextJS (v14.2.7) with App Router and I have deployed it (dockerized) in App Platform Digital Ocean.

At random times it shows in the browser the following instead of the page:
b:I[39275,[],""]
d:I[61343,[],""]
f:I[20405,["601","static/chunks/app/error-db8d0ec24f5e26cb.js"],"default"]
2:T880,�ν και � έ�Ρ�Ρ � και �ιμο�οι��Π......... (200 lines with these characters)

It's like it prints the page source code instead of running it. It's the same bug as it was in v13.4.5
I don't receive any error in Sentry and there isn't any issue in dev mode.

76 Replies

@gin did u make sure to bundle everything into your container
Chalcid waspOP
Yes I use the same docker file as the official nextjs repo
oh wait it was you lol
@Chalcid wasp Yes I use the same docker file as the official nextjs repo
how does your package.json look like
Chalcid waspOP
It's a critical bug, all pages are replaced by source code istead of ui components
@gin nothing special
{
"name": "app",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": { .... }
Am I the only one who has this issue?
@Chalcid wasp Am I the only one who has this issue?
depends on several factors
what dependencies do u use?
cause i never faced those issues in production
Chalcid waspOP
On what factors? I use also node v18.20.4 , react 18.3.1, react-dom 18.3.1
Chalcid waspOP
{
"name": "app",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@sentry/browser": "^8.25.0",
"i18next": "^23.11.5",
"i18next-resources-to-backend": "^1.2.1",
"next": "^14.2.7",
"next-i18n-router": "^5.5.1",
"polished": "4.3.1",
"react": "^18.3.1",
"react-bootstrap": "1.6.7",
"react-dom": "^18.3.1",
"react-i18next": "^15.0.1",
"react-perfect-scrollbar": "^1.5.8",
"sass": "1.32.12",
"sharp": "0.33.2",
"styled-components": "5.3.3",
"styled-system": "5.1.5"
}
}
Chalcid waspOP
I tried it also, same result
I don't think that the issue is on dependencies
@Chalcid wasp I don't think that the issue is on dependencies
yeah something in your codebase is messed up
mind sharing me your src?
ill try to reproduce it
Chalcid waspOP
It's nextjs internal as it was on v13.4.5 -> https://github.com/vercel/next.js/issues/54750
Chalcid waspOP
It's random, it's difficult to reproduce it
Chalcid waspOP
Yes but maybe it's not fixed?
@Chalcid wasp Yes but maybe it's not fixed?
then it happens cause of your configuration or something deep in your src
Chalcid waspOP
How can I find the issue if it doesn't trigger anything and it's random?
In what case NextJS renders source code instead of ui components?
@Chalcid wasp How can I find the issue if it doesn't trigger anything and it's random?
its triggers on specific routes or just randomly across your whole app
Chalcid waspOP
Across the whole app
@Chalcid wasp In what case NextJS renders source code instead of ui components?
well based on the screenshots these are server rendered strings
Chalcid waspOP
Yes
@Chalcid wasp Yes
and u made sure every asset is available
so nothing gets blocked
from your end
or from the server
Chalcid waspOP
If there was an issue, would it be random?
nothing gets blocked
@Chalcid wasp In what case NextJS renders source code instead of ui components?
NextJS is somewhat of a mix between MPA and SPA, when you have loaded the page and try to navigate to server component or perhaps render a server component, the js client actually fetches this "source code" that you're seeing and mounted it into the site to give it an SPA feel
it's weird that you're seeing this code since this should only be fetched by next's client code
now that I think of that, perhaps DigitalOcean uses a bot that scours the links on the page and accidentally triggered the "code render"?
@iyxan23 it's weird that you're seeing this code since this should only be fetched by next's client code
no these strings are returned by the server and used for the hydration
@Chalcid wasp If there was an issue, would it be random?
check in the console if u have something same as this
Chalcid waspOP
It's like the app has crashed and I need to redeploy it in order to get fixed
also check in your network tab if something gets blocked
@iyxan23 oh really?
yeah
Chalcid waspOP
Nothing gets blocked in network tab
@Chalcid wasp Nothing gets blocked in network tab
so all the js chunks are loaded?
Chalcid waspOP
yes no issue
hmm thats weird
Chalcid waspOP
all chunks, rsc etc
and it happens when u navigate between routes?
Chalcid waspOP
no, when i navigate to any page
@Chalcid wasp no, when i navigate to any page
can u send me the link to your app
that is deployed
Chalcid waspOP
It's not public yet,we test it on dev stage
was your app working in the past
or was it happening on your first deployment aswell (this bug)
Chalcid waspOP
When we deployed it in production in App Patform
Locally I never had any issue, but I didn't tested so many times in production mode
@Chalcid wasp When we deployed it in production in App Patform
wait so let me clear up, production means i can access it but u just told me that the bug happens on dev staging
Chalcid waspOP
I have uploaded (production mode) to app platform but is accessible only for specific ips not public
deploy it with vercel and check if the same happens there aswell
Chalcid waspOP
Yes i thought it but I don't like the pricing and how vercel charge
Chalcid waspOP
I mean for when we go public
Instead of app platform to use vercel
i was saying for the testing reasons
Chalcid waspOP
Maybe it's app platform issue with Cache. I test it more