未找到模块：无法解析“C:\Users\Mohammad\Desktop\Chat-System\src\components”中的“..src/firebase.js”

Question

**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

Answer 1

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.