Error encountered: Attempted to set invalid data in DocumentReference function. Value of field is not supported: undefined

Currently in the process of developing an e-commerce platform using Vue and Firebase. I am encountering an issue when attempting to add cart information for the logged-in user. Surprisingly, the information is saved perfectly on the initial attempt. However, subsequent attempts fail with the following error:

Uncaught FirebaseError: Function DocumentReference.set() called with invalid data. Unsupported field value: undefined

To resolve this issue, I have to refresh the page before it works again. The source of the problem eludes me.

It's worth mentioning that if I try adding any other value besides the cart, it functions correctly.

checkoutLoggedInUser(){
  var db = firebase.firestore();           
  var user = firebase.auth().currentUser;

  db.collection("orders").add({
     user_id:user.uid,
     cart:this.$store.getters.cart                    
  })

  this.$store.commit('emptyCart')                
  this.$router.push({ name: 'Home'})
}

Answer №1

It seems like the error message you received indicates that there is an attempt to write data to a document using a field that is currently undefined in your JavaScript code. To troubleshoot this issue, consider checking the values being passed by utilizing console.log or a debugger tool to pinpoint which specific field is causing the problem. Once identified, you can either modify the code to pass a valid value or remove the problematic field altogether.

Additionally, it's important to note that while the error message mentions a call to DocumentReference.set(), the code snippet provided actually involves DocumentReference.add(). This discrepancy suggests that the error could potentially be originating from a different section of your codebase.

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

Unable to assign a value to a property within an object using AngularJS

const objectData = {}; objectData[key]["digits"] = `${set.first},${set.second},${set.third},${set.fourth}`; When key is a numeric value, an error occurs: TypeError: Cannot set property 'digits' of undefined ...

Different methods for organizing an array of strings based on eslint/prettier

I possess an assortment of keys that I desire to sort in alphabetical order whenever I execute eslint --fix/prettier. My inference is that such a feature does not exist by default due to its potential impact on the code's behavior. Therefore, my quer ...

Encountering an issue while attempting to replicate the Spotify app on localhost:3000. The error message "TYPEERROR: Cannot read property 'url' of undefined" is hind

As a first-time user of stackoverflow, I am unfamiliar with its rules and regulations, so I apologize in advance for any mistakes I may make. Currently, I am attempting to create a Spotify clone using React. Everything was going smoothly until I completed ...

Concealing the Footer on Mobile Websites in Muse UI When the Keyboard Appears

In this project, I am using vue.js along with muse.ui and only incorporating JavaScript and CSS without the jQuery library. Currently, the footer position always ends up on top of the keyboard whenever an input field is focused. Is there a way to ensure th ...

Accessing iframe's HTML using a server-side solution by circumventing the Cross-Domain Policy

Our current challenge involves accessing dynamically generated HTML elements using JavaScript, particularly when trying to extract image URLs from these elements. When the HTML elements are generated solely through JavaScript, extracting the URL is straigh ...

What is the best method for extracting html-string from html-string across different browsers?

Works perfectly in Chrome and FF, but encountering issues with Safari. var content = '<div><span><p>Can you catch me?</p></span></div>'; content = $.parseXML(content); var span = $(content).find('span&apo ...

Ensure that the HTML input element only accepts positive values, including decimal numbers

I need to build an input field that only accepts positive numbers, including decimal values. Leading zeros are not allowed, and users should not be able to paste invalid values like -14.5 into the field. Here is my current implementation: <input type= ...

Ways to verify distinct elements within chrome.storage array

In my quest to develop an array stored in chrome.sync that holds the URLs of unique pages visited by a user, I have encountered a hurdle. Adding URLs to the array is not problematic, but determining whether a URL already exists within the array is proving ...

What are some ways to implement dangerouslySetInnerHTML in conjunction with read-more-react from npm?

Is there a way to include dangerouslySetInnerHTML in a text field without receiving an error? <ReadMoreReact text={yourTextHere} min={minimumLength} ideal={idealLength} max={maxLength} readMoreText={read ...

How can you calculate the ratio of one property value to another in AngularJS?

In my code, I am using ng-repeat to display data values from an object. <div ng-controller="myctrl"> <ul ng-repeat="number in numbers"> <li><span ng-bind="number.first"></span></li> <li><span ng-bind ...

Enhancing List Page Functionality with AngularJS/MVC5 Search Feature

As I work on enhancing the List page, my main focus is on implementing a search feature. While the code below effectively displays data in a list format, I am uncertain about how to start incorporating a search functionality into this page. HTML: <bo ...

JavaScript JSON function failing to show

I apologize for my limited knowledge on this matter... We are currently facing an issue with our website's pricing page. The dynamic calculator, which should display the price based on user input of size width and quantity, is not functioning as expe ...

how to use jQuery to sort appended data

I have a loop that retrieves data from the server in descending order, but when I use "append()" to add the data, it doesn't maintain the correct sorting. For instance, the first row shows up in the second position. Is there a way to append the data ...

Differences between Typescript Import and JavaScript import

/module/c.js, attempting to export name and age. export const name = 'string1'; export const age = 43; In b.ts, I'm trying to import the variables name and age from this .ts file import { name, age } from "./module/c"; console.log(name, ...

Using ng-click method with multiple arguments passed

When working on my code, I found that I like to pass two arguments to the function specified inside the ng-click attribute. <div class="shout" ng-repeat="user in users"> <p>{{user.name}}</p> <img src="media/images/delete.png" ng-cli ...

Is there a way to define the width of an element within the display:flex property in CSS?

Could you please review the following: https://codepen.io/sir-j/pen/dyRVrPb I am encountering an issue where setting the input [type=range] to 500px doesn't seem to make a difference from 100px, 500px, or 800px. This leads me to believe that display ...

Turn off client-side hydration in Nuxt.js or Prevent leaking raw data in Nuxt.js

Working on a Web App built with Nuxt.js for Server-Side Rendering poses some challenges. To safeguard my backend data, I turned to asyncData and Axios for communication with the server. However, Nuxt.js inadvertently exposed my backend data to clients th ...

Chart JS fails to update when computed property changes

I have a computed property named drilldownData: computed: { drilldownData() { if (this.toggle_drill === "up") { return this.waterfallDataSmall } else { return this.waterfallData } } } The toggle_dri ...

Are you encountering difficulties while managing back pressure as anticipated when applying node request or axios in combination with streams for downloading and extracting files?

We have encountered a peculiar problem while trying to download and decompress a large file of approximately 6 GB (which decompresses to around 64 GB) using the HTTP protocol. To achieve this, we are utilizing either Node.js' request library or axios. ...

Retrieve the selected item from a Vuetify data table

I am trying to achieve a functionality with my v-data-table that includes Show-select. I need to be able to access the data of the items I have selected and ideally, I would like to display an alert with the value of the first column when an item is checke ...