The current issue encountered is that the reference is undefined when attempting to update the location

I am facing an issue while trying to push my data to the Firebase real-time database in Next.js/React using the modular version. The error I encounter is as follows:

TypeError: ref._location is undefined

Below is the code snippet of what I have been attempting:

import firebase from "firebase/compat/app";
import { app } from '../../firebase_config';
import { db } from '../../firebase_config';
import { getDatabase, set, update } from "firebase/database";
import { ref } from 'firebase/storage';
import {auth} from '../../firebase_config'
import { getAuth, onAuthStateChanged } from "firebase/auth";

onAuthStateChanged(auth, async (user) => {
  if (user) {

    const uid = user.uid;

    // pushing data to the Firebase table
    const db = getDatabase(app);
    const dbRef = ref(db, 'users/' + uid);
    update(dbRef, {displayName: "Firebase9_IsCool"}).then(() => {
      console.log("Data updated");
    }).catch((e) => {
      console.log(e);
    })  
  
    console.log('Successfully pushed to Firebase');
  }
});

Answer №1

In place of a comment, here is the solution:

The problem lies in importing ref from the incorrect package - 'firebase/storage'

Import it correctly as shown below:

import { getDatabase, set, update, ref } from "firebase/database"

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

I'm having trouble getting the if statement within my JavaScript for loop to execute. What could be causing this issue?

Currently, I have a program that is designed to create a new array from an existing array of objects by asking specific questions. However, there seems to be an issue with the recognition of the if statement within the for loop when the program runs. The r ...

Using the JQuery template with $.get function does not produce the desired result

Working on populating a table using a Jquery Template can be tricky. One challenge is incorporating a json file via an ajax call for the population process. $(document).ready(function() { var clientData; $.get("/webpro/webcad/lngetusuario", funct ...

Customize the date format of the Datepicker in Angular by implementing a personalized pipe

I am dealing with a datepicker that defaults to the MM/dd/yyyy format, and I need it to adjust based on the user's browser language. For example, if the browser language is English India, then the format should be set to dd/MM/yyyy as shown below. Be ...

Looking to run JavaScript code during an Ajax request?

Chrome and Firefox are working fine with the following code, but I'm facing an issue with Safari. Main.php has: <script> function show<?php echo $s; ?>(str) { if (str.length == 0) { document.getElementById("textOrder").innerHTML = " ...

What is the best way to seamlessly transition layers from one location to another as the mouse exits and re-enters the window?

I have been working on refining a parallax effect to achieve a seamless transition between two positions based on where the mouse exits and enters the window. In the JSFiddle example provided, there is a slight 'pop' that I am looking to replace ...

How can I store the output of Javascript in a PHP variable?

<script> FB.api('/me', function(user) { if(user != null) { var name = document.getElementById('uid'); uid.innerHTML = user.uid } }); </script> U ...

Encountering an issue with react-dom that needs to be resolved

After updating my node and npm installations, I encountered an error when trying to run my project. Specifically, I am using "react": "^0.13.3" and "react-dom": "0.14.0-beta3" npm WARN unmet dependency /Users/hilarl/Desktop/client/node_modules/react-do ...

Is it possible to replicate this effect using HTML5 Canvas?

I'm looking to recreate the four shapes showcased on this website using HTML5 Canvas, while ensuring that the page stretches to 100% width and height. Is this achievable? I am relatively new to working with Canvas. Below is my current CSS code: htm ...

Switching the vertical alignment of grid items in Material UI when the page is collapsed

When the page is collapsed, the Left grid item element moves to the top of the page and the Right grid element is positioned below it. I would like to reverse this behavior so that the Right element appears on top and the Left element below when the page ...

The image will remain hidden until it is fully loaded and ready to be displayed

I am currently working on a script that involves displaying a loading icon until an image is fully loaded, at which point the loading icon should disappear and the image should be shown. Unfortunately, my current code is not working as intended. Here is a ...

Regular Expressions for Password Validation in JavaScript

I'm seeking assistance in developing a regex pattern for a password. The password should consist of letters, numbers, underscores ( _ ), dollar signs ( $ ), and hyphens ( - ). It must be between 3 to 30 characters long. ...

perform the directive function following the ng-cloak execution

I am having an issue with my content using the ng-cloak directive, as I would like to retrieve the height of an element using innerHeight() within a directive. However, when I use innerHeight(), the element is hidden by ng-cloak so the result is always 0. ...

Is Vue substituting the "el" component instead of rendering within it?

Have you noticed that when creating a Vue instance, the element specified by "el" gets replaced instead of rendering inside of it? If I use an id to reference the "el", everything works fine. For example, new Vue({el: "div#app", render: h => h("span", ...

Convert inline javascript into an external function and update the reference to `this`

I'm currently in the process of converting some inline JavaScript code triggered by a button's onclick event to a regular JavaScript function. In my previous implementation, I successfully used the "this" reference to remove a table column. Howe ...

Diverse Range of Exports Available in React Component Library

I have been working on developing a component library consisting of multiple independent components. My objective is to enable users to easily import and use these components in their projects, similar to the following: import One from 'component-lib ...

Retrieving the $scope data from within an http.get callback

Would someone be able to assist me with storing the data returned by the $http.get function in a $scope variable for use in my ui-grid control? I have tried the code below but seem to be missing something simple. I just can't figure out what it is: ...

Maximizing the performance of plotting hundreds or thousands of series in a 2D scatter or line chart using Echarts

Plotting a large data set with hundreds or thousands of series using Echarts has proven to be slow and challenging to manage. If you take a look at the example code provided in this large and progressive options on single series instead of all plotted se ...

Accessing a webpage solely by logging in prevents unauthorized access

My login page currently redirects to a page named gallery.html upon successful login. However, I have noticed that entering /gallery.html in the URL also directly accesses the secure page without logging in. Can anyone suggest an effective way to impleme ...

Clarification: Obtain the state prior to the current one

I've been diving into the React Documentation and came across a topic that I'm struggling to grasp fully: https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state function Counter() { const [count, setCount] = useState(0) ...

Tips for organizing intricate views with vuex

After using vuex for a few months, I'm starting to question if I am utilizing it correctly. The main issue I am facing is, How should I organize my states in a modular way? For example: I have a view where users can create and edit a resource (post ...