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:
Page layout may be unexpected due to Quirks Mode
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.
Affected Resources
1. 1 element
1. |Document in the DOM tree|Mode|URL|
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.
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.