**I am new to firebase and reactJS and am following a tutorial online and I cant seem to figure out what the problem is. I am getting these errors:**
Module not found: Can't resolve '..src/firebase.js' in 'C:\Users\Mohammad\Desktop\Chat-System\src\components'
This is my firebase.js file:
import firebase from "firebase/compat/app"
import "firebase/compat/auth"
import "firebase/compat/firestore"
import {initializeApp} from "firebase/firebase-app";
var firebaseConfig = {
apiKey: "AIzaSyBAnPelYqTf2K4WlNjfU7_92u9LS-KFJjQ",
authDomain: "chit-chat-8d3a1.firebaseapp.com",
projectId: "chit-chat-8d3a1",
storageBucket: "chit-chat-8d3a1.appspot.com",
messagingSenderId: "530247128399",
appId: "1:530247128399:web:17bfb27e879f37ad1b213a",
measurementId: "G-0X7Q8F4WFX"
};
const firebaseApp = initializeApp(firebaseConfig);
const db = firebaseApp.firestore();
const auth = firebase.auth();
const provider = new firebase.auth.GoogleAuthProvider();
export default db;
export { auth, provider };
This is my Login.JS File:
//importing React
import React from 'react';
//Importing Icons for Login Page
import { FacebookOutlined, GoogleOutlined } from '@ant-design/icons';
import firebase from "firebase/compat/app";
import { auth } from '..src/firebase.js';
const Login = () => {
return (
<div id="login-page">
<div id="login-card">
<h2>Welcome to <a href="https://github.com/pkashi1/Chat-System" title='GitHub Link'>Chit-Chat!</a></h2>
<p>A Simple, Secure, and User-Friendly Messenger</p>
<div className="login-button google"
onClick={() => auth.signInWithRedirect(new firebase.auth.GoogleAuthProvider())}
>
<GoogleOutlined/>Sign In With Google
</div>
<br></br>
<br></br>
<div className="login-button facebook"
onClick={() => auth.signInWithRedirect(new firebase.auth.FacebookAuthProvider())}>
<FacebookOutlined/>Sign In With Facebook
</div>
</div>
</div>
);
}
export default Login;
Heres my package.json file incase there are some version errors:
{
"name": "chitchat-template",
"version": "0.1.0",
"private": true,
"dependencies": {
"@ant-design/icons": "^4.6.2",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"axios": "^0.21.1",
"firebase": "^7.20.0",
"react": "^16.13.1",
"react-chat-engine": "^1.8.10",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Since I am new to this, please reply with as much information that you can, I am confused by a lot of this code, Thanks
Judging off what you have said I believe the issue to be a incorrect file path.
Can you try instead of ..src
and change it to be ../src/
.
Currently your project is looking for a folder called..src which of course doesn't exist.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.