CODEWITHSUNDEEP
javascriptreactjsfirebasefirebase-authenticationreact-fullstack
abhi5heklal
abhi5heklal

Reputation: 15

Unable to import auth from firebase

I am getting the following error while trying to import auth from firebase.js

Module not found: Error: You attempted to import /firebase/auth which falls outside of the project src/ 
directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.

However firebase.js is stored in the src directory and the file in which I have been trying to import is Register.jsx which is in the src/pages folder. I have been stuck on this for hours now. Any help would be appreciated.

firebase.js contents

import { initializeApp } from "firebase/app";
import { getAuth } from "/firebase/auth";
import { getStorage } from "firebase/storage";

const firebaseConfig = {
  apiKey: "<API_KEY>",
  authDomain: "chateapp.com",
  projectId: "ch715c",
  storageBucket: "chaom",
  messagingSenderId: "4960541",
  appId: "<APP_ID>"
};

// Initialize Firebase
export const app = initializeApp(firebaseConfig);
export const auth = getAuth();
export const storage = getStorage();

Register.js contents

import React from 'react'
import Add from "../img/addAvatar.png"
import { createUserWithEmailAndPassword, updateProfile } from "firebase/auth";
import { auth, storage } from '../firebase'
import { useState } from 'react';
import { ref, uploadBytesResumable, getDownloadURL } from "firebase/storage";

const Register = () => {
  const [err, setErr] = useState(false)
  const handleSubmit = async (e) => {
    e.preventDefault()
    const displayName = e.target[0].value;
    const email = e.target[1].value;
    const password = e.target[2].value;
    const file = e.target[3].files[0];

    try {
      const res = await createUserWithEmailAndPassword(auth, email, password);



      /** @type {any} */
      const metadata = {
        contentType: 'image/jpeg'
      };

      const storageRef = ref(storage, displayName);
      const uploadTask = uploadBytesResumable(storageRef, file, metadata);

      uploadTask.on('state_changed',
        
        (error) => {
          setErr(true);
        },
        () => {
          getDownloadURL(uploadTask.snapshot.ref).then(async(downloadURL) => {
            await updateProfile(res.user, {
              displayName,
              photoURL:downloadURL,
            });
          });
        }
      );
    }
    catch (err) {
      setErr(true)
    }

  }
  return (
    <div className='formContainer'>
      <div className='formWrapper'>
        <span className='logo'>Lambda Chat</span>
        <span className='title'>Register</span>
        <form onSubmit={handleSubmit}>
          <input type="text" placeholder='display name' />
          <input type="email" placeholder='email' />
          <input type="password" placeholder='password' />
          <input type="file" id='file' style={{ display: 'none' }} />
          <label htmlFor="file">
            <img src={Add} alt="" />
            <span>Add an avatar</span>
          </label>
          <button>Sign Up</button>
          {err && <span>Something went wrong!</span>}
        </form>
        <p>Have an account? Login</p>
      </div>
    </div>
  )
}

export default Register;

Upvotes: 0

Views: 1152

Answers (1)

Kostas Minaidis
Kostas Minaidis

Reputation: 5516

In the firebase.js remove the initial / from the getAuth import.

import { getAuth } from "/firebase/auth";

To:

import { getAuth } from "firebase/auth";

Upvotes: 2

Related Questions