Minified React Errors in production

[gaurishhs]

Verify canary release

• I verified that the issue exists in the latest Next.js 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/A

Which 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

git clone https://github.com/gaurishhs/Portfolio.git
pnpm i
vc 

Describe the Bug

I'm using next-themes along 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 use vc deploy

Expected Behavior

No such errors

Which browser are you using? (if relevant)

Brave Browser

How are you deploying your application? (if relevant)

Vercel

[ArmanNisch]

I just installed a new, 100% untouched version of next.js, and this error is present.

The steps I followed:
Step 1) I ran npx create-next-app@latest and then

Step 2) change the next.config.js as follows:

/** @type {import('next').NextConfig} */
const nextConfig = {
    output: 'export',
    // Optional: Add a trailing slash to all paths `/about` -> `/about/`
    trailingSlash: true,
    // Optional: Change the output directory `out` -> `dist`
    distDir: 'dist',
}

module.exports = nextConfig

Step 3) ran the next build command.

Step 4) cd to /dist and then I served the files with a local static site server (I used browsersync).

The Errors I see:

1. x5 Uncaught Error: Minified React error #418
2. x1 Uncaught Error: Minified React error #423

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 react 18 issue as GatsbyJs users report a similar issue: gatsbyjs/gatsby#36232

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.

[gaurishhs]

Quite disappointing to see that this is a growing issue and this has been open for 2 weeks yet no official response.

[icyJoseph]

Well I gave it a go with @ArmanNisch 's approach, except with serve rather than browsersync, and I see no issue what so ever.

• https://www.npmjs.com/package/serve

Do yo use these when running the dev mode?

[gaurishhs]

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: ***@***.***>

[icyJoseph]

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 viewbox on SVG's, rather than viewBox.

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.

[gaurishhs]

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 .***@***.***>

[icyJoseph]

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.

[icyJoseph]

Here you go, but I am still not sure, exactly what breaks

Screen.Recording.2023-06-08.at.19.37.41.mov

[icyJoseph]

One more monitoring the HTML tag attributes.

Screen.Recording.2023-06-08.at.19.39.46.mov

[icyJoseph]

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.

[gaurishhs]

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 .***@***.***>

[icyJoseph]

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?

[gaurishhs]

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 /cdn-cgi which is handled by cloudflare so i guess yeah, Cloudflare is making changes to the HTML

[returnednull]

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 fetch() and prop passing on our tutorial todo app. we heavily depend other global state and data fetching libraries. we cant trust client devices. for example if we have to use basic client releated feature for example Intl APIs/Web Senser APIs/global state persistence/optimistic data fetching etc.. we have to hydrate as null and show suspense, and initialize it as second render. this is not well documented or tooled workflow as its sucks on user side we dont consider this. main thread completely blocking for a while if hydration occurs. we cant wrap everything is suspense or we cant make sure of every 3rd party lib./framework/client compatiable for us. this is painful job, sometimes I miss my getserversideprops days. this is not an issue back then. these new rsc approach is good but I think tooling and community around it sucks. sometimes I feel like I have to invest on another frontend framework/library.

[DzTheRage]

131k of these errors in Bugsnag since April 16th.

Potential causes I've read while debugging this.

• h1 tag inside of p tag
• window usage
• date mismatch
• dynamic imports

[JClackett]

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 <p>'s in <p>'s or any weird html stuff, though I would have thought dev would pick this up?

[saulve]

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:

1. I'm using next-intl for translations which required me to put my app under the dynamic [locale] route.
2. The main app html is generated in LocaleLayout
3. I also had a global not-found.tsx, which required me to create a RootLayout in the project root.
4. I was dynamically rendering Vercel's <Analytics /> and <SpeedInsights /> inside the RootLayout:

import { PropsWithChildren } from "react";
import { Analytics } from "@vercel/analytics/react";
import { SpeedInsights } from "@vercel/speed-insights/next";

// Since we have a root `not-found.tsx` page, a layout file
// is required, even if it's just passing children through.
export default function RootLayout({ children }: PropsWithChildren) {
  return (
    <>
      {process.env.NODE_ENV === "production" && <Analytics />}
      {process.env.NODE_ENV === "production" && <SpeedInsights />}
      {children}
    </>
  );
}

Dynamically rendering <Analytics /> and <SpeedInsights /> in RootLayout is what caused the problem since <html> element was not available there. Once I moved the rendering of these components to my LocaleLayout the errors stopped.

To clarify I had these errors both when running npm run build locally and when deployed on Vercel.

[Charles953]

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.

I have the same problem, have you solved it?

[claudiofrs]

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...

[jimmi2051]

My packages -

"next": "14.2.5"
"react": "18.2.0",

and still have the same problem.

Script I'm using to run on Production

NODE_ENV=production npm run build
NODE_ENV=production npm run start

[bhuwang279]

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

[JClackett]

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

[bhuwang279]

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.

[minusplusmultiply]

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. -_-

[samcx]

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 , there isn't much we can do about it.

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!

[matija2209]

I have the same error with fetching data with Prisma in my server component. In development it works fine. When I try running it locally via next start on Vercel I get blank screen in #452 error on refresh but not on initial load.

I guess I need to move the data-fetching to the good old API calls...

[Netail]

Am also facing a hydration error on production, tried the following to see what's going on;

const nextConfig = {
    swcMinify: false,
    experimental: {
        serverMinification: false,
    },
    webpack: (config) => {
        config.optimization.minimize = false;
        config.optimization.minimizer =[];

        return config;
    }
};

But does not seem to unminify the react bundle

[Statfine]

This question is occasional or every time must first, my side is occasional