找不到模块:无法解析'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:**

找不到模块:无法解析'C:\Users\Mohammad\Desktop\Chat-System\src\components‘中的..src/Firebase.js

这是我的firebase.js文件：

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 };

这是我的Login.JS文件：

//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;

这是我的package.json文件，以防出现一些版本错误：

{
  "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"
    ]
  }
}

由于我是新手，请尽可能多地回复，我被很多代码搞糊涂了，谢谢。

Answer 1

从你所说的判断，我认为这个问题是一个不正确的文件路径。

你能试着代替..src，把它改成../src/吗？

目前，您的项目正在寻找一个名为..src的文件夹，该文件夹当然不存在。