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

Experience a clean slate with a white screen featuring only the elements from app.vue, free from any additional components

My current issue involves an app that was built using Vue.js and Cordova. After successfully building the app with Cordova for iOS, I encountered a problem when trying to emulate it on iOS. The app only shows the components from app.vue, specifically the n ...

DataGrid React MUI: Aligning Column Data and Header for "Number" Type

In my React project, I am using MUI. I noticed that when I specify the type of a column as type: "number", both the column header and data align to the right. This issue can be replicated in a simple example taken from the MUI documentation: code ...

The error "navigator.permissions.query is not a defined object" is encountered in the evaluation

Whenever I try to access my website on an iPhone 7, I encounter a frustrating error. The main screen loads without any issues, but as soon as I click on something, a white bank screen appears. I believe this piece of code might be the cause: useEffect( ...

Exploring the connected component feature in React/Redux

While testing the connected component of my React/Redux app, I encountered an error. The test case that caused the error is: App component › shows account info and debits and credits` Invariant Violation: Could not find "store" in either the context or ...

Have you ever wondered why MEAN.js applications use the #! symbol at the start of their URLs

Embarking on my first MEAN application build using MEAN.JS, I was intrigued by the structure of how mean.js organizes the application, particularly why URLs begin with /#!/. For instance, for the login page, I envisioned: http://example.com/login instea ...

Received TypeError: Unable to call reset function - issue clearing input field post ajax request

Having Trouble Clearing Input Fields After AJAX Request: $.ajax({ type: "POST", url: "river_flow.php", data: { username: $("#username").val(), idv:$("#idv").val(), comment: $("#comment").val()}, cache: false, success: function(da ...

Preventing Click Events during Data Fetching in React.js without Using jQuery

In the redux store, there is a state called isFetching. When data is being fetched from the backend, this state becomes true. I need to disable all click events when isFetching is true, without using jQuery. I stumbled upon some solutions (involving jQuer ...

Techniques for removing a label value using JavaScript

There is a label named "test" being generated from the .cs [C# code] with the text "data saved successfully". However, when I click the save button, I want to clear its text. Currently, I have 3 required field validators with messages [cannot be blank, can ...

Button ng-click with identical function parameters

I am facing an issue with two buttons that have the same ng-click but different parameters. <label class="item item-input"> <button ng-click="takePicture(true)">Save Settings</button> <button ng-click="takePicture(false)">Choos ...

Customizing React components based on API data

const LinkList = () => { const [links, setLinks] = useState([]); const url = 'http://localhost:5000/xyz'; const hook = () => { console.log('effect'); axios .get(url) .then(respo ...

Why is the React Firebase hook failing to display errors when attempting to sign in with an email and password?

This is the code I am using: import { useSignInWithEmailAndPassword } from 'react-firebase-hooks/auth'; let [ signInWithEmailAndPassword1, user, error, ] = useSignInWithEmailAndPassword(auth); I have attempted mult ...

Is there a built-in function in Firefox that can retrieve a list of all indexedDB names stored in the

When working in chrome, I utilized the window.indexedDB.databases() method to retrieve all indexedDb names. However, this same method does not seem to be functioning in firefox. In an attempt to resolve this issue, I will explore alternative methods such ...

Angular 2: Change Boolean value depending on a condition

I find myself facing a challenge with a search-bar feature. My goal is to display all the filtered names when the input value reaches a length of 2 or more characters. After successfully extracting the value.length from the input field, I encountered a ro ...

Having trouble with JavaScript concat function not behaving as it should? Can you provide more details to

I am trying to extract all the cities from an object that contains country names as keys and arrays of cities as values. However, my approach seems to be failing and I can't figure out why. var cities = { "United Kingdom": ['london'], ...

Configure parameters for Shopware navigation path

When initializing my Shopware 6 plugin, I encountered an issue with the Vue Router not recognizing a standard ID on the first page. routes: { list: { path: 'list/:id', component: 'plugin-list' }, ...

A guide on how to initiate a click event in Angular 5 using JQuery

I am trying to trigger a click event for each element based on its id, but it doesn't seem to be working. Below is the code I am using: ngOnInit() { this.getProductsLists(); } getProductsLists() { this.supplierService.getProductLists() .sub ...

Trouble with CSS animation when incorporating JavaScript variables from a PHP array

Whenever I use a script to fetch an array of objects from PHP... I successfully display the results on my website by outputting them into Divs. The challenge arises when I introduce CSS animations. The animation only triggers if the variable length excee ...

The issue with the Woocommerce quantity increment buttons not functioning properly persists after an AJAX refresh, and the automatic load feature only activates after two

I've hit a brick wall with this particular issue. Many people have suggested solutions, but none seem to be effective for me. My situation probably resonates with quite a few individuals: I decided to customize the WooCommerce quantity input (/global ...

The functionality of Slick.js is compromised when the v-for directive is refreshed

Hey there! I recently worked on a project using VueJS and slickjs. Everything was running smoothly until I encountered an issue with the slick carousel when updating data in a v-for loop via an AJAX request triggered by a click event. The new data is sto ...

The dynamic loading of scripts in Nuxt is causing issues with changing route casings

One of the challenges I faced was creating a vue component to dynamically load scripts for ads and ensure they are removed and reloaded when the route changes. The issue arises when navigating back to the same page after leaving, as the ads stop appearing. ...