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

0
votes

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.

1
javascriptvue.jsdeploymentnuxt.jsnetlify
I've had a look through the repos and tried to reproduce locally, it looks like it's a couple of issues. One is that your deployed app is trying to read from your locally hosted API and is encountering a CORS error. Are you trying to host your API on Heroku? If so, you'll need to use the production URL for that. Secondly, due to the CORS error, Vue/Nuxt is running into a hydration error (blog.lichter.io/posts/vue-hydration-error) because it can't fulfil the API request... I'm not 100% sure but hope this steers you in the right direction. Feel free to ask any more questions – arapl3y
Thanks for the comment! I managed to fix the CORS error by successfully add the production URL and doing some setup on my Strapi database. I'm now left with the DOMException and TypeError: "n is undefined", I had a look at the link you mentioned and I have tried to fix where I think there might have been invalid HTML in my components. I'm a bit confused why these errors occur on deployment but the frontend runs fine on my localhost? – fraserky

1 Answers

0
votes

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.