This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
Minified React Errors in production #50245
Comments
|
I just installed a new, 100% untouched version of next.js, and this error is present. The steps I followed: Step 2) change the Step 3) ran the next build command. Step 4) cd to The Errors I see:
There has been an ongoing discussion around this issue since Dec 2022; not sure why a ticket was not created: #43921 This issue might be a Update: To rule out the possibility that a browser plugin was causing this issue, I viewed the next site in Google Chrome incognito and Safari incognito (I have no extensions enabled in incognito). Across both browsers, the exact same errors are still present. |
|
Quite disappointing to see that this is a growing issue and this has been open for 2 weeks yet no official response. |
|
Well I gave it a go with @ArmanNisch 's approach, except with serve rather than browsersync, and I see no issue what so ever. Do yo use these when running the dev mode? |
|
As i specified this does not occur at all on my machine whether i run it in
dev or build and serve it. It happens only when i deploy on vercel. Seems
like it's something with Vercel
…On Thu, 8 Jun, 2023, 21:50 Joseph, ***@***.***> wrote:
Well I gave it a go with @ArmanNisch <https://github.com/ArmanNisch> 's
approach, except with serve rather than browsersync, and I see no issue
what so ever.
Do yo use these when running the dev mode?
—
Reply to this email directly, view it on GitHub
<#50245 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ASZRZB6O52QO6CA42OKGQQDXKH3WHANCNFSM6AAAAAAYMW62JQ>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
|
|
Yeah, well you seemed to agree with @ArmanNisch 's approach, but you two are most likely looking at two wildly different issues, that manifest through the same error message. I think in @gaurishhs 's case there's two potential issues: <script type="b06cea64085c747784d6e62e-text/javascript">
!function(){try{var d=document.documentElement,c=d.classList;c.remove('light','dark');var e=localStorage.getItem('theme');if('system'===e||(!e&&true)){var t='(prefers-color-scheme: dark)',m=window.matchMedia(t);if(m.media!==t||m.matches){d.style.colorScheme = 'dark';c.add('dark')}else{d.style.colorScheme = 'light';c.add('light')}}else if(e){c.add(e|| '')}if(e==='light'||e==='dark')d.style.colorScheme=e}catch(e){}}()
</script>This script from next-themes is sent by the server like this, but then it transforms into: <script>
!(function () {
try {
var d = document.documentElement,
c = d.classList;
c.remove("light", "dark");
var e = localStorage.getItem("theme");
if ("system" === e || (!e && true)) {
var t = "(prefers-color-scheme: dark)",
m = window.matchMedia(t);
if (m.media !== t || m.matches) {
d.style.colorScheme = "dark";
c.add("dark");
} else {
d.style.colorScheme = "light";
c.add("light");
}
} else if (e) {
c.add(e || "");
}
if (e === "light" || e === "dark") d.style.colorScheme = e;
} catch (e) {}
})();
</script>And then that the server sends
Also the email is somehow mangled, but perhaps that's done through a script or something. Or maybe it's just that your latest deploy is not up to date. |
|
So you mean to say that the main issue is with next-themes? Ignoring the
SVG viewbox errors (I'll fix them) I think the email protection link is due
to Cloudflare
…On Thu, 8 Jun, 2023, 22:51 Joseph, ***@***.***> wrote:
Yeah, well you seemed to agree with @ArmanNisch
<https://github.com/ArmanNisch> 's approach, but you two are most likely
looking at two wildly different issues, that manifest through the same
error message.
I think in @gaurishhs <https://github.com/gaurishhs> 's case there's two
potential issues:
<script type="b06cea64085c747784d6e62e-text/javascript">
!function(){try{var d=document.documentElement,c=d.classList;c.remove('light','dark');var e=localStorage.getItem('theme');if('system'===e||(!e&&true)){var t='(prefers-color-scheme: dark)',m=window.matchMedia(t);if(m.media!==t||m.matches){d.style.colorScheme = 'dark';c.add('dark')}else{d.style.colorScheme = 'light';c.add('light')}}else if(e){c.add(e|| '')}if(e==='light'||e==='dark')d.style.colorScheme=e}catch(e){}}()
</script>
This script from next-themes <https://linear.app/vercel/issue/NEXT-themes>
is sent by the server like this, but then it transforms into:
<script>
!(function () {
try {
var d = document.documentElement,
c = d.classList;
c.remove("light", "dark");
var e = localStorage.getItem("theme");
if ("system" === e || (!e && true)) {
var t = "(prefers-color-scheme: dark)",
m = window.matchMedia(t);
if (m.media !== t || m.matches) {
d.style.colorScheme = "dark";
c.add("dark");
} else {
d.style.colorScheme = "light";
c.add("light");
}
} else if (e) {
c.add(e || "");
}
if (e === "light" || e === "dark") d.style.colorScheme = e;
} catch (e) {}
})();
</script>
And then that the server sends viewbox on SVG's, rather than viewBox.
[image: Screenshot 2023-06-08 at 19 19 31]
<https://user-images.githubusercontent.com/21013447/244457237-ae643d33-627e-41ac-95e9-6f583b7646b0.png>
Also the email is somehow mangled, but perhaps that's done through a
script or something. Or maybe it's just that your latest deploy is not up
to date.
—
Reply to this email directly, view it on GitHub
<#50245 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ASZRZB633KHE7V7ZB6KJNT3XKIC2BANCNFSM6AAAAAAYMW62JQ>
.
You are receiving this because you were mentioned.Message ID: <vercel/next
.***@***.***>
|
|
Yeah like I've debugged it and stepping through I see a frame where the UI goes to light mode, and then the errors come in, and then it goes dark mode again. Why doesn't it happen locally though, that's really odd. |
|
Here you go, but I am still not sure, exactly what breaks Screen.Recording.2023-06-08.at.19.37.41.mov |
|
One more monitoring the HTML tag attributes. Screen.Recording.2023-06-08.at.19.39.46.mov |
|
And btw, this could also be a coincidence, as if React is done doing a bunch of work, and paints, and also prints errors. Doesn't necessarily mean the next-themes is culprit, at least not 100%. We have some hints yes, but not conclusive yet. Do you see this error in the Vercel previews? I wonder if, somehow, cloudflare is the issue? That'd be wild, but within the margin of errors I've seen. |
|
I don't see the errors in vercel preview as well
…On Thu, 8 Jun, 2023, 23:24 Joseph, ***@***.***> wrote:
And btw, this could also be a coincidence, as if React is done doing a
bunch of work, and paints, and also prints errors. Doesn't necessarily mean
the next-themes <https://linear.app/vercel/issue/NEXT-themes> is culprit,
at least not 100%. We have some hints yes, but not conclusive yet.
Do you see this error in the Vercel previews? I wonder if, somehow,
cloudflare is the issue? That'd be wild, but within the margin of errors
I've seen.
—
Reply to this email directly, view it on GitHub
<#50245 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ASZRZB4LNPM6PYQJAG6H3A3XKIGULANCNFSM6AAAAAAYMW62JQ>
.
You are receiving this because you were mentioned.Message ID: <vercel/next
.***@***.***>
|
|
Mmm well, all the more reason to think something might be happening on Cloudflare. Do you know if you have HTML rewriter, or any setting activated in Cloudflare that could be making changes to your HTML? |
I have enabled Cloudflare rocket loader and some scripts do get loaded from |
|
please guys this is such a bullshit error it can happen anytime anywhere basically, in complex web apps. we follow best practices of our stack but its sucks on both UX/DX sides. error is basically we are doing some calculations on server and we are doing same on client on hydrating, if results dont adds up, we throw error. it doesn't make any sense, we don't have to consider hydration of every server rendered value. we dont use simple |
|
131k of these errors in Bugsnag since April 16th. Potential causes I've read while debugging this.
|
|
We're getting the same issues with Remix, and only on Vercel. Hard to pin down! |
|
Our issue seems to be resolved after removing new Date() from inside render and putting that logic into a useEffect. |
|
@DzTheRage japp date and locales can cause this issue easily. For example a call to For these though, the supressHydrationWarning flag should suffice, https://react.dev/reference/react-dom/hydrate#suppressing-unavoidable-hydration-mismatch-errors |
|
@wub Getting this on a Remix + React 18 + Vercel deployment too. Completely fresh project with only a root.tsx and index.tsx file with Chakra UI installed Edit: I've tracked this down to the Vimeo Screen Recorder Chrome Extension. Although I was getting this error on my friend's iPhone too which wouldn't have had this extension. Disabling the extension fixes the issue on my Laptop. 
This even happens on the official Vercel Remix Starter deployment |
|
Ok so this comes down to React 18 not being able to handle hydration errors very gracefully. The solution seems to be to make a |
|
I have the same problem currently. In my case, I get 4 errors next.config.js
I run |
|
I get those exact same errors on my site
…On Tue, 4 Jul, 2023, 12:13 April Mintac Pineda, ***@***.***> wrote:
I have the same problem currently. In my case, I get 4 errors
*next.config.js*
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: false,
output: 'export',
transpilePackages: ***@***.***/*']
};
module.exports = nextConfig;
[image: image]
<https://user-images.githubusercontent.com/21032419/250787539-36d975ec-71de-4e02-8898-d931bf67ace7.png>
I run next build then I publish it in s3 bucket behind cloudfront.
—
Reply to this email directly, view it on GitHub
<#50245 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ASZRZBYPDXJU2CKI7BGJJF3XOO3QNANCNFSM6AAAAAAYMW62JQ>
.
You are receiving this because you were mentioned.Message ID: <vercel/next
.***@***.***>
|
|
I got the issue too |
|
I have 3 errors you can see I deployed it on CloudFlare page, idk how to fix it
|
|
Is issue resolved |
|
@martianacademy no! |
|
The same may happen if you are using i18next and react-i18next libraries and a backend to load the translations. Remember to surround with |
|
Same here. Pinning Next to 14.1.4 seems to solve this for now. |
samcx
added
the
please add a complete reproduction
|
We cannot recreate the issue with the provided information. Please add a reproduction in order for us to be able to investigate. Why was this issue marked with the
|
|
@gaurishhs just adding the |
replace nextjs version 14.1.4 A self-test is available to solve this problem |
I have moved that app away from Next.js so i cannot provide a Repro for it now but hopefully somebody else can. |
|
For folks that were running into the In our case, we had the following in one of our import {Suspense} from 'react';
// This library is compiled down to CJS
// The library's entrypoint includes the `"use client";` directive
import SomeComponent from 'an-internal-library';
export default function Layout({children}) {
return (
<>
{children}
<Suspense>
<SomeComponent />
</Suspense>
</>
);
} |
|
We had the same issue with |
|
emmmmm just had this issue, IN MY CASE I was importing a mui icon into a server component.. in my case it was error #306 |
|
This issue has been resolved for me since 14.2.3 |
|
@waza-ari any luck with that |
|
@samcx sorry, I should've updated this here, I did get caught up in other work. In our case it also was a MUI import that caused this issue. Also, the error description is quite generic and I have the feeling many (potentially similar) issues get mixed up (same for me probably). So to our case: # This one is broken and causes errors in production (but works in dev mode)
import Grid from '@mui/material/Unstable_Grid2';
# This one worked in both cases
import Grid from '@mui/material/Unstable_Grid2/Grid2';Which is a bit weird as the first import is according to their docs. Will try (hopefully on the weekend) to repro and potentially test with canary as well, hope I can keep my promise this time. |
|
I had these same issues only in production. It seems there can be potentially a lot of different reasons for it to happen, like locale management, date usage during render, etc. In my case it was some slight differences in space and comment handling in the html caused by cloudflares "Auto Minify" feature, which is deprecated and will soon be not available anymore, but that caused the difference between client and server html. |
|
I had the same issue for me when using |
|
We recently upgraded from 12.3.4 to 14.2.3 and experienced the same issue: Intermittent client side errors only in the production build, not in the dev environment. |
This comment has been minimized.
This comment has been minimized.
|
How are we supposed to find the cause of the error when it only happens in production haha? im getting blasted with sentry errors relating to hydration errors, and I load up an exact same copy of the database, same timezone, same user account and its fine in dev, have tried turbo as well. Im not doing any |
This comment has been minimized.
This comment has been minimized.
|
I finally managed to clear these errors. Sharing the solution in case somebody else find it useful. In my case the issue was as follows:
Dynamically rendering To clarify I had these errors both when running |
I have the same problem, have you solved it? |
This comment has been minimized.
This comment has been minimized.
|
I also encounter the same error. Not sure what's happening. Mine was just a simple route using pages setup, checked by removing all commented line, removing all HTML tags, but no avail. dev works fine tho... |
|
My packages - and still have the same problem.Script I'm using to run on Production |
|
I had the same issue. App was working fine in development but facing issue in production or local build. The only thing seems to work was to change the route name. For eg. my route folder name was "luxury-camp" and changing it to "camp" fixed the issue. But now the problem is marketing team wants "luxury-camp" in route |
There's no way that that is the cause, gota be coincidence |
I hope its coincidence, there's no way i can debug this. I can change the route name to anything and it works but its just "luxury-camp" route name raising the issue. |
|
Just today - out of nowhere, no updates/changes to my site in about 10 days, and now I'm getting a bunch of these errors too. -_- |
|
Hi everyone— I will be moving this to our discussions. I think it's likely that there a several of ways to arrive to this issue, but without a If you are able to figure out how to minimally reproduce the error, I encourage you to submit a new bug report so we can take a closer look! |
This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
and others
Verify canary release
Provide environment information
Operating System: Platform: darwin Arch: x64 Version: Darwin Kernel Version 21.5.0: Tue Apr 26 21:08:22 PDT 2022; root:xnu-8020.121.3~4/RELEASE_X86_64 Binaries: Node: 18.16.0 npm: 9.5.1 Yarn: N/A pnpm: 8.5.1 Relevant packages: next: 13.4.3 eslint-config-next: N/A react: 18.2.0 react-dom: 18.2.0 typescript: N/AWhich area(s) of Next.js are affected? (leave empty if unsure)
App directory (appDir: true)
Link to the code that reproduces this issue or a replay of the bug
https://github.com/gaurishhs/Portfolio
To Reproduce
Describe the Bug
I'm using
next-themesalong with app directory and i get these Minified react errors in the production deployment only on Vercel. These errors are not there during development mode or if i usevc deployExpected Behavior
No such errors
Which browser are you using? (if relevant)
Brave Browser
How are you deploying your application? (if relevant)
Vercel
The text was updated successfully, but these errors were encountered: