What is causing my Nuxt.js application to show a blank page following deployment on Netlify?

Currently, I am facing an issue while trying to deploy a Nuxt.js site using Netlify and Heroku. Although my build passes on Netlify, the link displays a blank page (). Despite following various online tutorials and adapting solutions from SO for react apps with similar problems, I am unable to pinpoint the reason for this malfunction.

This is my first experience building a web app with Nuxt/Vue and deploying it live. You can find my codebase on Github here https://github.com/KyleSFraser/Portfolio, and my Netlify build settings are configured as follows.

https://i.sstatic.net/3pQ8L.png

Upon inspecting the webpage, I noticed several errors, but they are not making much sense to me in terms of understanding why my site is not displaying properly.

https://i.sstatic.net/3hdIt.png

I would greatly appreciate any assistance in resolving the issue causing my site to appear blank.

EDIT After successfully adding the production URL as suggested and configuring some settings on the Strapi database, I was able to address the CORS error. However, I am now encountering a DOMException and a TypeError: "n is undefined". Despite refactoring my code to ensure there is no invalid HTML, these errors persist.

EDIT 2 Thanks to @arapl3y's comment and link, it seems to be a hydration problem. I have narrowed it down to my components that rely on my API, namely ProjectAccordion.vue and ProjectItem.vue.

Although I am still uncertain of the root cause of the issue, it appears to occur when trying to fetch data from my Heroku API. While I can access and populate my database using my Heroku URL, it seems there may be an issue in how the API is being integrated into my app.

javascriptvue.jsdeploymentnuxt.jsnetlify

Answer №1

After troubleshooting, I discovered that one of my Netlify environmental variables was searching for GRAPHQL_URL while my nuxt.config.js was looking for BACKEND_URL. This discrepancy was causing the issue.

Once I ensured that Netlify's environment variables matched those in my nuxt.config, the errors vanished and my application successfully started fetching and displaying data from my API.

I also encountered an issue with Invalid HTML that led to a hydration problem. I had placed <ul> tags in a parent component and was attempting to generate <li> items within a child component. It seems that when deployed, these were interpreted as empty <ul> tags. To resolve this, I moved the <ul> tags to enclose the actual <li> items in the child component, which resolved the DOMExcepption errors.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing the SendOwl License API for theme licensing

Currently developing a Shopify theme for sale and exploring licensing options Considering using SendOwl's API for licenses - Shopify themes support html/css/js/liquid, no server-side code, so JavaScript is required. Can the SendOwl API be used to v ...

javascriptjsonajaxshopify

Is there a way to navigate to a specific div when clicking on it?

Need help with scrolling after running code function scrollFunction() { document.getElementById('insert').scrollIntoView(); } I have a button that triggers some code and I want the page to scroll afterwards. Currently, it scroll ...

javascripthtmlasp.netvb.net

Step-by-step guide to selecting a specific point on an HTML5 canvas using Python's selenium webdriver

Looking to automate interactions with a simple HTML5 application on a website using Selenium webdriver in Python with Firefox on Linux. The challenge is clicking a button on an HTML5 canvas, then dragging one or two objects around the canvas post-button cl ...

javascriptpythonhtmlseleniumbrowser-automation

Updating the model does not reflect changes made to AGM polygons' binding

<div *ngFor="let p of polys"> <agm-polygon #cmp [paths]="$any(p.getPath()).i" [fillColor]="'blue'" [draggable]="true" [editable]="true" [polyDraggable]="true" (p ...

javascriptangulargoogle-mapsagm

The subscriber continues to run repeatedly, even after we have removed its subscription

The file brief-component.ts contains the following code where the drawer service is being called: this.assignDrawerService.showDrawer(parameter); In the file drawer-service.ts: private drawerSubject = new BehaviorSubject<boolean>(false); public ...

javascriptangularangularjstypescriptionic-framework

Tips for combining or removing letters from the existing content in an input field for editing todo items in Redux

At this moment, my focus is on implementing an edit feature for my to-do app. The issue I am facing is that it manages to retrieve the current value, but there seems to be a restriction on deleting or adding letters. You can refer to the first input field ...

javascriptreactjsredux

jQuery smooth scrolling problem causing a one-second page "blinking" issue

Currently, I have implemented a smooth scrolling effect on my website using the following jQuery code: jQuery('html,body').animate({scrollTop:scrollTarget}, 1000, "swing"); Although the effect works well in general, I have noticed that when mul ...

javascriptjquerycss

Unable to interpret AJAX request using PHP

I am trying to implement a feature where file contents can be deleted upon the click of a button. I have set up an ajax request that sends two variables - the filename and the name of the person who initiated the deletion process. The PHP function is runni ...

javascriptphpajax

Can someone explain the process by which Vue is autonomously inserting properties into my q-input component that I designed?

Currently, I am using Vue 3.2.4, Vuex 4.0.1, and Quasar 3.1.0 in my project setup. One interesting aspect of my project is a custom Vue component that I have recently developed. Here's a snippet of the code: <template> <q-input outlined v- ...

vue.jsvue-componentvuejs3quasar-frameworkquasar

Verify that the lower limit is not higher than the upper limit set in an Angular application

In my Angular application, I have two input fields for minimum and maximum values. I want to display an error message if the user enters a minimum value greater than the maximum value provided, or the default maximum value if none is provided. The form is ...

javascriptangularvalidationangular-formlyngx-formly

Exploring jQuery Mobile - What Causes an Empty State?

Using $.mobile.navigate("#test-page", {id:123}) for navigation to a secondary page seems to be successful. The transition between pages is smooth.... but the state remains empty! According to the documentation, the state should contain all necessary info ...

javascriptjqueryajaxjquery-mobilebrowser-history

Component html element in Angular not being updated by service

Within my Angular service, I have a property linked to a text field in a component's HTML. Oddly, when this property is updated by the service, the new value doesn't reflect in the HTML element unless the element is clicked on. I'm perplex ...

javascriptangulartypescriptngmodel

Struggling to launch my Django-powered API on Heroku

After attempting to deploy my Django-based API on Heroku, I have been encountering the same error repeatedly for what feels like eternity Error logs: *2021-01-31T11:42:30.163925+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=G ...

pythondjangoherokudeploymentweb-development-server

invoking external javascript functions within a vue instance

Here are the external javascript functions being utilized in a Vue instance: // debounce function debounce(func, wait, immediate) { let timeout; return function() { let context = this, args = arguments; later = function() { ...

vue.jsvuejs2vue-component

Using React to map and filter nested arrays while also removing duplicates

Hello, I recently started working with react and I've encountered a challenge while trying to map an array. const fullMen = LocationMenuStore.menuItems['menu']['headings'].map((headings: any) => { <Typography>{ ...

javascriptreactjstypescript

Integrate properties into a React component using an object as the representation

Can props be added to a component represented by an object? I am looking to add these props just once, within the map function, if possible. children: [ { id: '1', isActive: false, label: 'Home', component: & ...

javascriptreactjs

What is the best way to execute the angular-phonecat tutorial tests while the server is operating without a graphical user interface?

The angular-phonecat demo assumes that your server has chrome installed and you are running it there. When you run the command npm test, the local chrome browser should launch and continuously run the tests. However, if you are using a headless server li ...

javascriptnode.jsangularjsgoogle-chrome

Decoding JSON data in a Webmethod from an AJAX call

I am faced with a challenge regarding passing a JSON object from JavaScript to a VB.Net WebMethod via an ajax request and then attempting to deserialize it. Despite successfully passing the object, I encounter an error during deserialization: Error convert ...

javascriptajaxjsonvb.netjson.net

Load the React component asynchronously while waiting for the data to be fetched

My ReactJS component looks like this: import React, {useState} from 'react'; import Plot from 'react-plotly.js'; import {utility} from "./utility"; function Chart() { const [use_data, setData] = useState([]); c ...

javascriptreactjs

What is the best way to randomly display an image from a JavaScript array within an HTML document?

I currently have this code in my HTML and JavaScript files, but I am having trouble with displaying images without using a URL in the JavaScript file. The images are located in my project folder. However, when I open the HTML file, the images do not appear ...

javascriptjqueryhtmlimagegenerator