In Vue Js, the function createUserWithEmailAndPassword does not exist within _firebase_config__WEBPACK_IMPORTED_MODULE_3__.default

My createUserWithEmailAndPassword function seems to be malfunctioning. Here is the code snippet I am using -

config.js

import firebase  from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'

const firebaseConfig = {
    apiKey: "AIzaSyBD8W5T7ZSvryW2TNSWOgoCO3EpyV6i65o",
    authDomain: "vue-firebase-site-eb79e.firebaseapp.com",
    projectId: "vue-firebase-site-eb79e",
    storageBucket: "vue-firebase-site-eb79e.appspot.com",
    messagingSenderId: "657936011344",
    appId: "1:657936011344:web:a2498d2fe27f951b6b8155"
  };


firebase.initializeApp(firebaseConfig)

const projectAuth = firebase.auth();
const projectFirestore = firebase.firestore();
const timeStamp = firebase.firestore.FieldValue.serverTimestamp

export default { projectAuth, projectFirestore, timeStamp }

useSignUp.js

import { ref } from "vue"
import projectAuth from '../firebase/config'

const  error = ref(null)

const signup = async (email,password,displayName) => {
    error.value  =  null

    try {
        const res = await projectAuth.createUserWithEmailAndPassword(email, password)
        console.log(res)
        if(!res){
            throw new Error('Could not complete the signup')
        }
        await res.user.updateProfile({displayName})
        error.value = null
        return res
    } catch (err) {
        console.log(err.message)
        error.value = err.message
    }
}

const useSignup = () =>{

    return{error, signup}
}

export default useSignup

I have tried multiple troubleshooting steps including-

  1. Deleting node modules and reinstalling them.
  2. Updating the version of firebase library.

Unfortunately, none of these solutions seem to be working for me. Any help or suggestions would be greatly appreciated!

Thank you in advance!!

Answer №1

If you are importing the config.js file into useSignUp.js and setting the entire object as projectAuth, there is a simpler way to do it.

Instead of importing the whole configuration object, you can just get the projectAuth variable from config.js:

import { projectAuth } from '../firebase/config'

Alternatively:

You can also import the firebaseConfig instead:

import firebaseConfig from '../firebase/config'

Then, inside the try block, you can use this approach:

const res = await firebaseConfig.projectAuth.createUserWithEmailAndPassword(email, password)

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

Error encountered: Invalid symbol detected ('<') while attempting to parse JSON in an Angular application

I am experiencing an issue with my Angular code when trying to submit a form. Upon clicking the submit button, an error saying JSON Parse error: Unrecognized token '<' appears, and empty records are being saved in the database. I have included ...

Fetching images stored on an external website and loading them into an iframe within an Electron application

I am contemplating turning my website into a desktop application using either an iframe or webview within an Electron app. My website contains numerous images that I wish to cache in the Electron app to prevent repeated downloads. Is it possible to access ...

Retrieve the upcoming tick in a Vue3 setup script

Can you explain how to utilize the next tick function in a vue3 setup script? <script setup> const message = 'Greetings!' this.$nextTick(() => { console.log("Perform tasks on the next tick") }); </script> <temp ...

Leveraging the power of Google Closure Templates alongside the versatility of

We are embarking on developing an application using JavaScript and HTML5 that will utilize a rest API to access server resources, leveraging the power and convenience of jQuery which our development team is already proficient in. Our goal is to make this a ...

Testing for packet loss using JavaScript

Do you know if there is a method in JavaScript to determine packet loss from the client side using AJAX, XMLHttpRequest, or any other approach? Your assistance is greatly appreciated. ...

What is the best method to remove a value from a JSON object in a CSV file?

I received a JSON response like this: xxx: ["fsd,das"] I am looking for a way to remove the value "fsd" from the JSON object. The issue is that the response inside the JSON is not actually an array, but rather a CSV format. How can I go about deleting it ...

Is there a specific side effect that warrants creating a new Subscription?

Recently, I had a discussion on Stack Overflow regarding RxJS and the best approach for handling subscriptions in a reactive application. The debate was whether it's better to create a subscription for each specific side effect or minimize subscriptio ...

Ways to retrieve a list of identifiers from arrays at both initial and subsequent levels

I'm currently dealing with a JSON/JavaScript structure that looks like this: { "comments": [ { "id": 1, "content": "lorem ipsum", "answers": [] }, { "id" ...

Leveraging weather application programming interfaces

I am trying to set up a basic webpage that can display tide information from wunderground.com. However, for some reason I am not seeing any results on the page. I have included the load function in hopes of at least getting something to appear when the p ...

Routes for Express are throwing a 500 internal server error

My server is unable to locate the APIs that I have created in the API directory, which is resulting in a 500 internal server error. I have thoroughly checked routes.js and everything appears to be correct. Additionally, I have an error.js file for handlin ...

Using threejs to pass multiple secondary geometries into vertex shaders

Suppose I have a geometry that I am using to create points or an InstancedMesh by utilizing the vertices. However, if I want to change this underlying geometry to something else - such as from a cone to a sphere - that has the same number of vertices, how ...

Guide to utilizing various Nodelists using the forEach function

I'm currently developing an online store project that includes a shopping cart feature. My goal is to send a POST request to the server with the items selected by the user in the cart. I have initialized an empty array and I have 3 Nodelists containin ...

Displaying a progress bar during image uploads in PHP without using AJAX

I am in the process of uploading a file on my website and it is working well. However, I would like to display a progress bar while the upload is taking place. I have considered using ajax for this purpose, but I am unable to use ajax. Is there a way to ac ...

Uncovering the source of glitchy Angular Animations - could it be caused by CSS, code, or ng-directives? Plus, a bonus XKCD comic for some light-hearted humor

Just finished creating an XKCD app for a MEAN stack class I'm enrolled in, and I'm almost done with it. However, there's this annoying visual bug that's bothering me, especially with the angular animations. Here is the link to my deploy ...

Align the reposition button with the pagination in the datatables

I am looking to adjust the placement of my buttons. The buttons in question are for comparison, saving layout, and printing. I would like them to be inline with the pagination, as I am using datatables here. <table id="sparepart_id" cellspacing="0" ...

Combine JavaScript array objects based on their unique IDs

Looking to combine 2 arrays of objects based on IDs (ID and AUTOMOBIL). However, the current code only saves the last array of objects (OPREMA). Any suggestions on how to merge all of them correctly? If the ID in a1 is == 1, I want to save all OPREMA wher ...

Bootstrap not being recognized in AngularJS HTML

I've been working on learning AngularJS, but unfortunately I can't seem to get any Bootstrap themes to show up in my web application. Here is the HTML code for the header that I've been trying: <nav class="navbar navbar-default"> ...

Compare the precise value of $(window).height() to a specific scroll value

Initially, I retrieve $(window).height() and compare this height with the specific scroll value. $(window).scroll(function (event) { var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); console.log("window hei ...

The caching behavior of Vue keep alive does not reset even after the $destroy method is called

Is there a way to selectively remove a component from the keep-alive cache while still keeping it cacheable for the next visit? To test if a component is in the cache, follow these steps: In the app component, click on "goto foo". In the foo component, ...

Load the flexslider once the fancybox container is opened

In my experience, I have found flexslider and fancybox to be very useful plugins. Individually, they work perfectly fine on a website that I am currently working on. However, when I tried placing a flexslider gallery inside a fancybox div, I encountered a ...