App built with v0 does not work after deployment

Help
, ,
1

I’ve implemented a quick app with v0, and everything is working as expected in the preview, but when I deploy it to Vercel, I’m greeted with a blank page. Looking further at the console, I get this:

image
image904×236 35.7 KB

The deployment is this one:

2

It looks like there are a few different errors happening. The link in the console has a bit more explanation. Are you able to share the repo or a link to the public chat? That would let us see what in the project might be causing the error.

1 Like
3

@amyegan Here you go XUnfollower - v0 by Vercel

1 Like
4

So, I found the issue, but I don’t know how to properly fix it. Here’s the thing…

When you ask v0 to generate a project with navigation, the layout.tsx will be something like this:

import { Inter } from 'next/font/google'
import Link from 'next/link'
import { Button } from "@/components/ui/button"

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <header>
          <nav>
            <Button asChild variant="link">
              <Link href="/">Home</Link>
            </Button>
            <Button asChild variant="link">
              <Link href="/about">About</Link>
            </Button>
          </nav>
        </header>
        <main>{children}</main>
      </body>
    </html>
  )
}

With this code, you get this error in v0 console:

image
image1037×797 78.2 KB

To fix this, you have to remove the <html> and <body> tags from layout.tsx. However, this prevents a successful deployment.

Without the <html> and <body> tags, the deployment fails with the errors I mentioned in the OP. With the <html> and <body> tags, the deployment works, but we get an error in v0 console. The preview still works, the deployment works (there are no errors on the browser console after deployment), so I guess I can continue like this, but the error in v0 console shouldn’t be there.

How to fix both things?

5

The chat is private so I can’t explore the code generated there.

It looks like the issue happens because of nested layouts duplicating <html> and <body>. This Stack Overflow post explains more: reactjs - Warning: You are mounting a new body component when a previous one has not first unmounted - Stack Overflow

6

@amyegan Yes, I’ve reached that conclusion, see my previous post. However, like I mentioned, the Console in v0 shows an error, although everything works, this error shouldn’t be there.

8

Your report was shared internally with the v0 team