next.js: Minified React Errors in production

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

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.

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

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.

I’m facing the same issue, I’ve downgraded my next version from 14.2.0 to 14.1.4 and the error went away. Seems like the short term solution to this is to downgrade

This error started for us when updating to nextjs 14.2.0 only on production builds (Minified React error 306). We didn’t have that error on 14.1.4.

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

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)

We had the same issue with 14.2.2, downgrading to 14.1.4 does resolve the issue for us. I’ll try to provide a reproduction example tomorrow.

For folks that were running into the Minified React Error #306 after upgrading to 14.2.0 or 14.2.1 - this PR (that was included in 14.2.2) seemed to resolve the issue for us: https://github.com/vercel/next.js/pull/64558!

In our case, we had the following in one of our layout.tsx files:

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>
    </>
  );
}

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);
};

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.

@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

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

这种情况在 14.2.0 中再次发生。

replace nextjs version 14.1.4 A self-test is available to solve this problem

Hi, I want to pitch in, that we also experience this when upgrading to 14.2.1 (Minified React error 306). This can only be observed in the production build, the development build ran fine. And I was very hyped about the DX improvements to error messages. Downgrading to 14.1.4 fixed the issue for us. I’m sorry I can’t provide something more useful as to why this may be happening.

Edit: we narrowed it down to a component that also re-exports types from another file with types. Removing this re-export fixed it!

Thanks I’ll try this out @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

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

'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

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

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

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

@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/

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

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