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

[shahryarjb]

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>

I did not use the i18next or react-i18next, but I have this error

[pogran]

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.

@pulgaroja create pls separate issue with this bug. I think this bug connected not only with placeholder

[OrionStark]

Well, it's already been fix on my side.

I'm using express to serve the next app. Then I realize the installed package version in next project and the express project are different.

[pogran]

Well, it's already been fix on my side.

I'm using express to serve the next app. Then I realize the installed package version in next project and the express project are different.

@OrionStark can you show your fix or next js version where this bug was fix?

[OrionStark]

Well, it's already been fix on my side. I'm using express to serve the next app. Then I realize the installed package version in next project and the express project are different.

@OrionStark can you show your fix or next js version where this bug was fix?

@pogran "next": "12.1.6"

[pogran]

@OrionStark hm, i have bug in new version, latest. @pulgaroja create issue with your bug

[OrionStark]

This tip maybe help. Make sure your pre-render data doesn't change in the client side. If you want to change it, change it in useEffect

[rickycheuk]

I'm facing the same error on vercel, deployment 2 days ago was fine but tried to redeploy with the same code today and the site crashes on load...

I had same exact error last week, was able to fix them by using different icons packages from react-icon somehow, but not this time...

[pogran]

I created issue with this bugs https://github.com/vercel/next.js/issues/55231

[taheramr]

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.

Same exact issue here, we are using cloudfront to deploy a fully SSG site and we see this error from time to time after a new deployment occurs

[rajrupdasofficial]

Same error for my case images were affected , images are not showing , don't know what to do AWS Amplify, Cloudfront auto configuration I am sorry but , I shouldn't choose this framework for production it's absolutely pain in head. every now and then error and error I am tired of this framework and issues I am using nextjs version = 13.5.4

[nghyane]

I got the same error due to the time zone difference between the server and client.

const dateFormat = (dateString, showTime = false) => {
    // set muí giờ luôn là utc
    const date = new Date(dateString);
    const today = new Date();
    const isSameYear = date.getFullYear() === today.getFullYear();

    // date and time (12:00 AM)
    let options = {
        year: 'numeric',
        month: 'short',
        day: 'numeric',
        hour: 'numeric',
        minute: 'numeric',
        hour12: true,
    };

    if (!showTime) {
        options = isSameYear
            ? { month: 'short', day: 'numeric' }
            : { year: 'numeric' };
    }

    // time zone
    options.timeZone = 'UTC';

    return date.toLocaleString(DATE_TIME_LOCALE, options);
};

[ilhamgum]

I also encounter this issue, but with #306 error code, something like Element type is invalid. Received a promise that resolves to: undefined. Lazy element type must resolve to a class or function.

solve this by removing ^ sign on dependencies version in package.json, thus the development & production would be exactly installing the same dependencies and shall behave the same.

[lanzoninicola]

I have the same issue.

My environment is the following:

"@remix-run/css-bundle": "^1.16.1", "@remix-run/express": "^1.16.1", "@remix-run/node": "^1.16.1", "@remix-run/react": "^1.16.1",

The solution provided by @lopugit (https://github.com/vercel/next.js/issues/50245#issuecomment-1608732639) effectively resolved the errors I was encountering in the browser console. Following their instructions made the errors disappear.

[doksara]

Any news on this?

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[krisporovarde]

I get Application error: a client-side exception has occurred (see the browser console for more information). on vercel production. Console says Minified React error #423, #130

Can someone help

[adriancmiranda]

'use client';

import { useEffect, useState } from 'react';
import type { PropsWithChildren } from 'react';

export function BaseShell({ children }: PropsWithChildren) {
    const [isClient, setIsClient] = useState(false);
    useEffect(() => {
        setIsClient(true);
    }, []);
    return isClient ? (
        <>
            {children}
        </>
    ) : null;
}

import type { ReactNode } from 'react';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';

import BaseShell from './BaseShell';

const inter = Inter({
    subsets: ['latin'],
});

export const metadata: Metadata = {
    title: 'your webapp',
    description: 'your platform',
};

export default function RootLayout({ children }: { children: ReactNode }) {
    return (
        <html lang='pt-br'>
            <head>
                <meta name='viewport' content='minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no' />
            </head>
            <body className={inter.className}>
                <BaseShell>
                    {children}
                </BaseShell>
            </body>
        </html>
    );
}

this should work 4 Uncaught Error: Minified React error #423

[hadrian625]

'use client';

import { useEffect, useState } from 'react';
import type { PropsWithChildren } from 'react';

export function BaseShell({ children }: PropsWithChildren) {
  const [isClient, setIsClient] = useState(false);
  useEffect(() => {
      setIsClient(true);
  }, []);
  return isClient ? (
      <>
          {children}
      </>
  ) : null;
}

import type { ReactNode } from 'react';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';

import BaseShell from './BaseShell';

const inter = Inter({
  subsets: ['latin'],
});

export const metadata: Metadata = {
  title: 'your webapp',
  description: 'your platform',
};

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
      <html lang='pt-br'>
          <head>
              <meta name='viewport' content='minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no' />
          </head>
          <body className={inter.className}>
              <BaseShell>
                  {children}
              </BaseShell>
          </body>
      </html>
  );
}

this should work 4 Uncaught Error: Minified React error #423

We had same issues with many 418 and 422 minified errors and in the end I tracked them to some components loaded dynamically with next/dynamic and ssr=false. The errors were not reproducible all the time. We only could see them randomly and in our exception logs in Application Insights. I used the approach from @adriancmiranda to replace that ssr=false with a shell component that would render the content client side only. It is working with dynamic components also

[lopugit]

Thanks I'll try this out @adriancmiranda 🙏

[ryanolson-aumni]

This started happening again in 14.2.0 for us. Our application didn't have this issue until the upgrade from dependabot this morning and now we're seeing this on many of our pages.