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