Next.js Discord

Discord Forum

Nextjs app runs locally but not when hosted on vercel

Unanswered
Reddish carpenter ant posted this in #help-forum
Open in Discord
Reddish carpenter antOP
Attached the video which demonstrates my problem
i get a short glimpse then i get a blank screen

53 Replies

Reddish carpenter antOP
please can someone reach out to me i need to give this to a client and i am stuck here
i have also reached out to vercel over twitter but they havent replied to me
if someone wants to try and help me out i can give access to the repo as well
Sloth bear
hello
what seems to be the problem?
wait im trying to convert the mkv to an mp4
in this snapshot it looks like the website kinda works
it perhaps cannot load the media
i opened your site on my browser and it worked fine
then it threw an error
and turned white
are you there
Reddish carpenter antOP
yep hi
@Sloth bear and turned white
Reddish carpenter antOP
yep thats the issue it loads for a split second and goes white
@Sloth bear Click to see attachment
Reddish carpenter antOP
had no idea what this meant either
the codebase is very straightforward so im not playing around with the vdom either
Velvet ant
here is the full message error https://react.dev/errors/418?invariant=418
need to see some code so people can help you to debug this
Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:

- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
Reddish carpenter antOP
not using anything which is not just html tags and content in server side components
Velvet ant
yeah only thing that I see is the src path of the video seems to be wrong but not sure that can cause the error

<video className="w-full h-full object-cover" autoPlay loop muted>
   <source src="slideshow.mp4" type="video/mp4" /> // should be /slideshow.mp4
</video>
Reddish carpenter antOP
made the change checking the deployed version
Velvet ant
and also you have main tag nested but this should not trigger an hydration error I guess
and header and footer should be inside the body
@Velvet ant and header and footer should be inside the body
Reddish carpenter antOP
made that change
nope
this makes zero sense that it is working completely fine locally
Velvet ant
can you try a deploy without the video ?
Reddish carpenter antOP
sure
nope didnt wor
Velvet ant
seems that there is some cache because I still see the video tag
Reddish carpenter antOP
disable cache and reload there is no video tag
Velvet ant
that's what I did, even tried to use a different browser
but wait, I guess you also need to set an html tag in your root layout
import { Inter } from "next/font/google";
import "./globals.css";
import Header from "@/components/Header";
import Footer from "@/components/Footer";

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <body className="flex flex-col min-h-screen">
        <Header />
        <main className="flex-grow">{children}</main>
        <Footer />
      </body>
    </html>
  );
}
Reddish carpenter antOP
pushed
nope no change
Velvet ant
I still see the old version on prod
Reddish carpenter antOP
wdym
Velvet ant
in the sources panel of the dev tool
Reddish carpenter antOP
youre right i see that too
Velvet ant
I think vercel is caching here
it working
check the prod
Reddish carpenter antOP
works on my end
does it work on yours
Velvet ant
yep
Reddish carpenter antOP
im confused haha
thanks a lot for sticking around man
Velvet ant
yw
pretty sure the error was the html