Next.js Discord

Discord Forum

"React minified error" messages (like 418, 422, 423, 425)

Answered
Sage Thrasher posted this in #help-forum
Open in Discord
Avatar
Sage ThrasherOP
When running production and development versions of my next.js app locally, I do not receive these errors however the second I host it on Vercel, they're in the console? Does anyone know a solution to this or why it doesn't happen locally as it makes it challenging to debug
Answered by joulev
go to cloudflare > speed > optimisation > content optimisation, disable auto minify
View full answer

90 Replies

Avatar
James4u
if you can build production in your local and fails in the vercel I guess it's mostly env variables mismatch?
yeah, you should be able to see the logs in vercel
Avatar
Sage ThrasherOP
which logs would I be looking out for? I only have some error logs for a bug I fixed within server actions
Avatar
James4u
build logs
Avatar
Sage ThrasherOP
the only things in build logs is eslint warnings about not including depencies in useCallback / useEffect and another one for ref value will likely have changed
Avatar
James4u
they are warnings, no errors?
Avatar
Sage ThrasherOP
yes
Avatar
James4u
your pipeline must be terminated due to errors while building
then why can't you build?
Avatar
Sage ThrasherOP
i can build
i mean browser console errors
i get react minified errors
when going to pages
such as the home page
but this doesnt show when hosted locally
Avatar
James4u
oh, you get errors in the console in your browser after deploying on the vercel?
Avatar
Sage ThrasherOP
yeah, but not locally
vercel browser logs:
Image
Avatar
James4u
hmm again you need to check your node version of instance in your vercel
Avatar
Sage ThrasherOP
local:
Image
Avatar
James4u
oh I think they are the same errors
in the production they are being shown as minified error?
what do you see if you follow the link in the console error?
Avatar
Sage ThrasherOP
well when i use next build and start that locally, i dont get the minified errors
https://react.dev/errors/425
https://react.dev/errors/422
Avatar
James4u
huh? sort of hydration error?
Image
Avatar
Sage ThrasherOP
yeah i only receive when its on vercel
Avatar
James4u
Image
yeah, it is
Avatar
Sage ThrasherOP
im not sure what it could be, heres my layout.tsx and page.tsx files: (2s)
Avatar
James4u
did you recently upgrade any of your libraries?
Avatar
Sage ThrasherOP
ive frequently updated my next.js version and added libraries, i assumed vercel auto updates
Avatar
James4u
check your current version
Avatar
Sage ThrasherOP
how could i do this on vercel?
just checked deployment source, the nextjs version looks the same
import '@fortawesome/fontawesome-svg-core/styles.css';
import { config } from '@fortawesome/fontawesome-svg-core';
config.autoAddCss = false;

import { CookiesProvider } from 'next-client-cookies/server';
import { Metadata, type Viewport } from "next";
import { auth } from "@/auth/auth";
import { SessionProvider } from "next-auth/react";
import type { Session } from 'next-auth';
import { ToastContainer } from "react-toastify";

import "./globals.css";
import 'react-toastify/dist/ReactToastify.css';
import GlobalProvider from '@/providers/GlobalProvider';
import PlausibleProvider from 'next-plausible';
import { GeistSans } from 'geist/font/sans';
import { defaultMetadata, defaultViewport } from '@/lib/constants/defaultMetadata';
import ClientTooltip from '@/components/utils/ClientTooltip';
import '@/lib/constants/asciiLogo';

export const metadata: Metadata = defaultMetadata();
export const viewport: Viewport = defaultViewport;

export default async function RootLayout({ children, }: { children: React.ReactNode; }) {
  const session = await auth();
  const safeSession = ...

  return (
    <html lang="en" suppressHydrationWarning>
      <PlausibleProvider domain={process.env.NEXT_PUBLIC_TARGET_DOMAIN} trackOutboundLinks>
        <body className={GeistSans.className}>
          <SessionProvider session={safeSession}>
            <CookiesProvider>
              <GlobalProvider>
                {children}
              </GlobalProvider>
            </CookiesProvider>
          </SessionProvider>
          <ToastContainer />
          <ClientTooltip id="info" />
        </body>
      </PlausibleProvider>
    </html>
  );
}
layout.tsx
import { LightbarFooter } from "@/components/layout/LightbarFooter";
import { WideContainer } from "@/components/layout/WideContainer";
import HeroLoader from "@/layouts/home/HeroLoader";
import Hero from "@/layouts/home/Hero";
import ServerSection from "@/layouts/home/parts/ServerSections";
import { getGuildsHome } from "@/lib/data/servers/get/fetchHomeData";
import { GuildsTheme } from "@/providers/GuildsTheme";
import { Suspense } from "react";

export const revalidate = 3600;

export default async function Page() {
  const { featured, topVoted, trendingNew, recentlyVoted, randomGuilds, topTagGuilds } = await getGuildsHome();

  return (
    <GuildsTheme>
      <Suspense fallback={<Suspense><HeroLoader /></Suspense>}>
        <Hero />
      </Suspense>
      <Suspense>
        <WideContainer ultraUltraWide classNames="md:mt-28 mt-40 gap-28 flex flex-col">
          <ServerSection title="Random premium Discord servers" servers={featured} href="/list/featured" />
          <ServerSection title="Top voted Discord servers" servers={topVoted.guilds} href="/list/top" />
          <ServerSection title="Trending new Discord servers" servers={trendingNew} href="/list/new" />
          <ServerSection title="Recently Voted Discord servers" servers={recentlyVoted.guilds} href="/servers?sort=recently_voted" />
          <ServerSection title="Random Global Discord servers" servers={randomGuilds} hideMore />
          {Array.isArray(topTagGuilds) &&
            topTagGuilds.length > 0 &&
            topTagGuilds.map((category) => (
              <ServerSection
                key={category.tagId}
                title={`${category.tag} Discord servers`}
                servers={category.guilds}
                href={`/tags/${category.tagId}`}
              />
          ))}
        </WideContainer>
        <LightbarFooter />
      </Suspense>
    </GuildsTheme>
  );
}
page.tsx
when i remove the <suspense> wrapped around the widecontainer and lightbar footer, i get a ton of the minified react errors (418 and 425)
Avatar
James4u
what do you have inside HeroLoader and LightbarFooter and so on inside Suspense?
Avatar
Sage ThrasherOP
my fault i didnt see this.

so i just made a temporary route which is the exact same as that page above
i commented out the entire WideContainer component and everything inside, the errors stopped
i then uncommented the first ServerSection, error still didn't come back
i then uncommented the second ServerSection and they came back

here is the server section component:
import type { GuildResultData } from "@/typing";
import SeeMore from "@/components/utils/SeeMore";
import { GuildCard } from "@/layouts/home/parts/GuildCard";
import { GuildLoadingCard } from "@/layouts/home/parts/GuildLoadingCard";

type ServerSectionProps = {
  title: string;
  servers?: GuildResultData[];
} & (
  | { href: string; }
  | { hideMore: boolean; }
);

export default async function ServerSection({ title, servers, ...props }: ServerSectionProps) {
  return (typeof servers === "undefined" || (Array.isArray(servers) && servers.length > 0)) ? (
    <section className="flex flex-col">
      <h2 className="font-semibold capitalize max-w-sm md:max-w-lg text-white tracking-[-0.015em] mb-14">
        {title}
      </h2>
      {servers?.length ? (
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-x-6 gap-y-12">
          {servers.map((guild, index) => (
            <GuildCard key={`${index}:${guild.id}`} guild={guild} home />
          ))}
        </div>
      ) : (
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-x-6 gap-y-8">
          {[...Array(6)].map((_, index) => (
            <GuildLoadingCard key={index} />
          ))}
        </div>
      )}
      {(!('hideMore' in props)) && (
        <div className="justify-center flex mt-5">
          <SeeMore loading={!servers?.length} href={props.href} />
        </div>
      )}
    </section>
  ) : <></>
}
i think the reason it happens on vercel but not locally is because they use different databases therefore different data ?
Avatar
James4u
no, it's not related to the different db you have on your local vs vercel
Avatar
Sage ThrasherOP
im not sure what could possibly cause the browser error to show only on vercel then
Avatar
James4u
hydration error is basically about rendered payload mismatch on the server vs on your browser
Avatar
Sage ThrasherOP
but why would these logs not appear in the browser when i host on my local machine?
Avatar
James4u
that's weird, hydration error also should be there in your local as well
Avatar
Sage ThrasherOP
i did test using the same db but error still didnt show as you said, but thats the only thing which differs between vercel and local
Avatar
James4u
getGuildsHome
is this just calling api?
Avatar
joulev
do you have cloudflare or any proxy service between vercel and you?
Avatar
Sage ThrasherOP
only cloudflare
Avatar
joulev
rewriting html will cause hydration errors and cloudflare is known to do that
bingo
Avatar
Sage ThrasherOP
i did assume cloudflare at first
but wasnt sure
what specifically in cloudflare would i be looking for to prevent this? because when commenting out that entire wide container component, the error went
Avatar
James4u
oh
Avatar
Sage ThrasherOP
unstable_cache then API, yeah
import 'server-only';

import { APIKey } from "@/lib/data/APIKey";
import { unstable_cache } from "next/cache";

export const getGuildsHome = unstable_cache(async () => {
    const response = await fetch(`${process.env.API_ENDPOINT}/guilds/home`, {
        headers: APIKey
    });
    return response.json();
}, ['guilds-home'], { revalidate: 3600 });
reason for unstable cache was because it didnt work without for some reason
Avatar
James4u
yeah so it means cloudflare is rewriting html of that component
Avatar
Sage ThrasherOP
is there a reason as to why?
Avatar
joulev
go to cloudflare > speed > optimisation > content optimisation, disable auto minify
Answer
Avatar
joulev
also, do you use google fonts without next/font?
if you
* use google fonts without next/font
* AND use <link> tags to load the google fonts
* AND use cloudflare fonts,
it will cause hydration problems as well, so disable cloudflare fonts and migrate to next/font/google
Avatar
Sage ThrasherOP
i use GeistSans
import { GeistSans } from 'geist/font/sans';
<body className={GeistSans.className}>
Avatar
joulev
yeah this should be good then, ignore my google font comment because its not applicable
your case is 99% auto minify messing things up, disable it
Avatar
James4u
and this has nothing that can cause hydration error I think
Avatar
Sage ThrasherOP
just disabled cloudflare minify and errors still show in the console
Avatar
joulev
was it on before?
Avatar
Sage ThrasherOP
yup, javascript, css and html
i unchecked all of these
Image
Avatar
joulev
maybe give it a few minutes i guess, or you can try redeploy or purge cache on cloudflare or something
Avatar
Sage ThrasherOP
could that also be the reason for decreased performance when running a lighthouse test?
when i ran lighthouse test on localhost, my performance score was 100
but when running on vercel, it was around 80
or is this because its sat behind both cloudflare and vercel
Avatar
joulev
no cloudflare doesn't harm lighthouse. localhost is always faster than your actual website because in your actual website, you are fetching it from a server geographically further away from you than your laptop
Avatar
Sage ThrasherOP
i suppose but even when you're using ISR or fetching non blocking content?
Avatar
joulev
in caching > configuration you can purge everything
try it and probably the effect of auto minify will be gone
Avatar
Sage ThrasherOP
yup, errors are gone now
Avatar
joulev
decrease in lighthouse score could be due to a million things, i can't guess
Avatar
Sage ThrasherOP
tysm, i've been banging my head on this for so long
Avatar
joulev
been there done that haha, that's why i instantly knew it was because of cloudflare
Avatar
Sage ThrasherOP
the first thing i said was its either vercel or cloudflare but i went away from that idea because i had no clue what either would be doing