Quirks Mode issue

I am not sure if my issue is in vercel or with nextjs, but I am having trouble getting any of my deployments to actually render. There are no issues in the deployment, it is showing as successful. When I run npm run build locally it will start with no issues. However, when I try to open the deployment in the actual domain, I just get a white screen. I have tried to add the tag manually, even though I thought this was done during the build process. But that hasnt made any difference. I am still getting the same issue. Any help would be greatly appreciated. Thank you!

In the console, I get the following error:

  1. Page layout may be unexpected due to Quirks Mode

  2. One or more documents in this page is in Quirks Mode, which will render the affected document(s) with quirks incompatible with the current HTML and CSS specifications.

Quirks Mode exists mostly due to historical reasons. If this is not intentional, you can add or modify the DOCTYPE to be <!DOCTYPE html> to render the page in No Quirks Mode.

  1. Affected Resources
1. 1 element

  1. |Document in the DOM tree|Mode|URL|

| — | — | — |
|document|Quirks Mode

    • Learn more: Document compatibility mode

Hey, @jovianclouder! Welcome to the Vercel Community :wave:

TIL about Quirks Mode. I learned that it is a legacy feature in web browsers that allows them to maintain compatibility with older web pages. When a browser operates in Quirks Mode, it emulates behavior from older versions of browsers, which can lead to unexpected layout and rendering issues. This mode is typically triggered when a proper DOCTYPE declaration is missing from the HTML document.

Could you try the following?

  • Ensure <!DOCTYPE html> is present at the top of your main HTML file or _document.js.
  • Review Vercel deployment logs for warnings or errors
  • Verify environment variables and configurations match between local and Vercel.
  • Use browser dev tools to check for failed requests or redirects.
  • Test in incognito mode or after clearing cache.
  • Ensure you’re using a stable, recent version of Next.js.
  • Check browser console for JavaScript errors beyond Quirks Mode warning.
  • Inspect any custom server-side code or _document.js file.
  • Deploy a basic Next.js app to isolate the issue.

Let us know how you get on!

I’m trying to do each of those, tried most so far and no luck. It works locally after npm run build and npm start. But when once the deployment completes its not working again. I am pulling the code from github so I dont know where I should be looking for the index.ts file. The index.ts file works fine locally and has as expected. I also noticed that I cant get most of the v0 community templates to open either, not sure if thats related but seems possible.

I’m putting together a single page to deploy and test something really simple.

Thank you for your help tho

Feel free to share any links or examples with us? I can open v0 templates fine. :thinking:

Happy to help here!