Minified React Errors in production

[gaurishhs]

Verify canary release

• [X] 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: https://github.com/vercel/next.js/discussions/43921

This issue might be a react 18 issue as GatsbyJs users report a similar issue: https://github.com/gatsbyjs/gatsby/discussions/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 https://github.com/vercel/next.js/issues/50245#issuecomment-1582980971, 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:

This script from next-themes https://linear.app/vercel/issue/NEXT-themes is sent by the server like this, but then it transforms into:

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 https://github.com/vercel/next.js/issues/50245#issuecomment-1583058010, 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

https://github.com/vercel/next.js/assets/21013447/e967d949-0cc2-40b4-b683-93f2132d328e

[icyJoseph]

One more monitoring the HTML tag attributes.

https://github.com/vercel/next.js/assets/21013447/10bfb075-bc57-413a-9172-a4201edea026

[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 https://github.com/vercel/next.js/issues/50245#issuecomment-1583095903, 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

[wub]

We're getting the same issues with Remix, and only on Vercel. Hard to pin down!

[DzTheRage]

Our issue seems to be resolved after removing new Date() from inside render and putting that logic into a useEffect.

[icyJoseph]

@DzTheRage japp date and locales can cause this issue easily. For example a call to toLocaleUppercase can break all hell loose...

For these though, the supressHydrationWarning flag should suffice, https://react.dev/reference/react-dom/hydrate#suppressing-unavoidable-hydration-mismatch-errors

[lopugit]

@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

https://thingtime.com

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

https://remix-run-template.vercel.app/

[lopugit]

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 entry.client.tsx with the following which will use the React 17 hydrate function instead of the React 18 hydrateRoot function.

import { hydrate } from 'react-dom'
// import { RemixBrowser } from "remix";
import { RemixBrowser } from '@remix-run/react'
hydrate(<RemixBrowser />, document)

[aprilmintacpineda]

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: ['@internal/*']
};

module.exports = nextConfig;

I run next build then I publish it in s3 bucket behind cloudfront.

[gaurishhs]

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 https://github.com/vercel/next.js/issues/50245#issuecomment-1619607995, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASZRZBYPDXJU2CKI7BGJJF3XOO3QNANCNFSM6AAAAAAYMW62JQ . You are receiving this because you were mentioned.Message ID: <vercel/next .@.***>

[OrionStark]

I got the issue too

[shahryarjb]

I have 3 errors you can see https://noelhz.com/, it should be noted I did not use any time or etc, it is a simple site.

I deployed it on CloudFlare page, idk how to fix it

/** @type {import('next').NextConfig} */
const nextConfig = {
  basePath: "",
  reactStrictMode: true,
  images: { unoptimized: true },
  experimental: { runtime: 'edge'}
}

module.exports = nextConfig

[martianacademy]

Is issue resolved

[shahryarjb]

@martianacademy no!

[ger86]

The same may happen if you are using i18next and react-i18next libraries and a backend to load the translations. Remember to surround with <Suspense>

[FourwingsY]

just wrap <Suspense> on root layout's children makes it works, in my case.

[pogran]

with <Suspense> its also doesn't work ( i have this problem only in http://webcache.googleusercontent.com/

[pulgaroja]

I haven't seen this one reported in the thread, so in case someone else encounters it, this error appeared because I used the placeholder attribute on an input. This is reproducible, so I created a public repo here, deployed it with Vercel to this site: https://input-with-placeholder.vercel.app/

Please let me know if I should create a separate issue, and I'll be happy to do so.