Search code examples
javascriptvue.jsdeploymentnuxt.jsnetlify

Why does my Nuxt.js app display a blank page after deploying with Netlify?

I'm trying to deploy a Nuxt.js site using Netlify and Heroku, my build passes on Netlify but the link displays a blank page (https://fervent-swanson-d4b450.netlify.app/). I've tried following some tutorials online and tried to adapt other answers on SO for react apps with the same issue but I can't figure out what is going on and why it doesn't work.

This is my first time building a web app with Nuxt/Vue and deploying one live, my codebase is on github here https://github.com/KyleSFraser/Portfolio and my netlify build settings are as follows.

Netlify Build Settings

Web inspect shows the following errors but I can't make sense of them to know why my site isn't showing.

Web inspect error log

Any help would be appreciated in solving why my site shows blank.

EDIT I managed to fix the CORS error by successfully adding the production URL as suggested and doing some setup on the Strapi database. I'm now left with the DOMException and TypeError: "n is undefined", I've been refactoring my code to make sure there is no invalid HTML which could this but the same errors are persisting.

EDIT 2 Thanks to @arapl3y's comment and link, it's definitely a hydration problem, I've isolated the problem to being my components which rely on my API ProjectAccordion.vue and ProjectItem.vue.

I'm still not sure of the actual cause of the issue but it's looking like it's happening when I'm trying to fetch data from my Heroku API, I'm able to access and populate my database via my Heruoku URL so it leads me to believe it's the middlepoint of feeding the API into my app which is borked somewhere.

Solution

  • One of my Netlify environmental variables was looking for GRAPHQL_URL whilst my nuxt.config.js was looking for BACKEND_URL , this is where the problem was.

    Once I made sure Netlify's env variables matched my nuxt.config the errors disappeared and my app has started reading / displaying data from my API.

    There was also some Invalid HTML which caused the hydration issue. I had <ul> tags on a parent component and was trying to generate the <li> items in the child component. I think when deployed these were interpreted as empty <ul> tags. I shifted the <ul> to wrap the actual <li> items on the child component and it solved the issue DOMExcepption errors.