英文:
Unable to import auth from firebase
问题
在尝试从 firebase.js
导入 auth
时,我遇到了以下错误:
找不到模块:错误:您尝试导入位于项目 src/ 目录之外的 /firebase/auth。不支持src/之外的相对导入。您可以将其移动到src/内,或从项目的node_modules/目录添加符号链接。
但是 firebase.js
存储在 src
目录中,我一直在尝试导入的文件是 Register.jsx
,位于 src/pages
文件夹中。我已经卡在这个问题上好几个小时了。如果能提供任何帮助,将不胜感激。
firebase.js 内容:
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>"
};
// 初始化 Firebase
export const app = initializeApp(firebaseConfig);
export const auth = getAuth();
export const storage = getStorage();
Register.js 内容:
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);
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;
英文:
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;
答案1
得分: 2
在 firebase.js 中,将 getAuth 导入语句中的初始斜杠 / 删除。
import { getAuth } from "firebase/auth";
英文:
In the firebase.js remove the initial / from the getAuth import.
import { getAuth } from "/firebase/auth";
To:
import { getAuth } from "firebase/auth";
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论