模块解析失败：意外令牌 (96:49) 您可能需要适当的加载程序来处理此文件类型

Question

编译失败。

./src/App.jsx 96:49 模块解析失败：意外令牌 (96:49) 您可能需要适当的加载程序来处理此文件类型。 | 列号：11 | }

}，用户？= null。 用户：显示名称，“”）？ user.?displayName ? / # PURE /React.createElement("button", { | id: "signin-btn", | onClick: function onClick() {

应用程序.jsx：

import "./App.css";
import main from "./posts"

import firebase from "firebase/compat/app";
import { getAuth, GoogleAuthProvider, signInWithPopup, FacebookAuthProvider, onAuthStateChanged } from "firebase/auth";
import { GoogleOutlined, FacebookOutlined, FacebookFilled, InstagramFilled } from "@ant-design/icons";
import { Route, Routes, BrowserRouter } from "react-router-dom";

import { useState } from "react";
import React from "react";

const firebaseConfig = {
  apiKey: "AIzaSyC_XZCl-ExPJnDxA97kLZnb3ugooy9gtx4",
  authDomain: "and-volleyball.firebaseapp.com",
  projectId: "and-volleyball",
  storageBucket: "and-volleyball.appspot.com",
  messagingSenderId: "927173834515",
  appId: "1:927173834515:web:f67e66108730a2dc8dcce6",
  measurementId: "G-KMVRHMEEFS"
};

const firebaseApp = firebase.initializeApp(firebaseConfig);

const auth = getAuth();

function sign_in(){
  const login = document.getElementById("login");
  login.style.display = "block";
  const mywindow = window;
  mywindow.history.pushState("#login", "");
}

function sign_up_with_google() {
  const provider = new GoogleAuthProvider();

  signInWithPopup(auth, provider);

  const login = document.getElementById("login");
  login.style.display = "none";
}

function sign_up_with_facebook() {
  const provider = new FacebookAuthProvider();

  signInWithPopup(auth, provider);

  const login = document.getElementById("login");
  login.style.display = "none";
}
function sign_out(){
  auth.signOut(auth);
}


function App() {

  const auth = getAuth();

  const [ user, setUser ] = useState({});

  onAuthStateChanged(auth, (currentUser) => {
    setUser(currentUser);
    console.log(currentUser);
  })


 
    return(
      <div className="App">
      <div className="header" id="header">
          <img src="/images/And.jpg" alt="img" className="img" draggable="false"/>
          <p id="name">{user != null ? user.displayName : ""}</p>
          {user?.displayName ? <button id="signin-btn" onClick={function(){sign_out()}} className="btn">Logout</button> : <button id="signin-btn" onClick={function(){sign_in()}} className="btn">sign up</button>}
  
          
  
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
  
      </div>
      <div className="container">
      <div id="top"></div>
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
  
      
      
        <div className="img-container">
          <img draggable="false" src="/images/and.png" alt="img-2" className="img-2"/>
        </div>
        <div className="login" id="login">
          <p>Sign-up/Log-in</p>
          <a>
            <button className="google" onClick={() => {sign_up_with_google()}}>
              <GoogleOutlined style={{fontSize: "40px", color: "white", marginTop: "4px", float: "left", marginLeft: "5px"}}/>
              <p id="google-text">Sign-up with Google</p>
            </button>
            <br />
            <button className="facebook" onClick={() => {sign_up_with_facebook()}}>
              <FacebookOutlined style={{fontSize: "55px", color: "white", marginLeft: "0px", float: "left"}}/>
              <p id="face-text">Sign-up with Facebook</p>
            </button>
  
          </a>
      </div>
      </div>
  
    <div className="footer">
  
  
  
      <p>
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2890.7456504646957!2d-116.58286188455435!3d43.570182779124316!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x54ae4ba7f3126acd%3A0xf241b3243132602c!2sMarist%20Hall%20at%20St.%20Paul&#39;s%20Catholic%20Church!5e0!3m2!1sen!2sus!4v1661484276436!5m2!1sen!2sus" width="1520" height="600" styles="border:0;" allowFullScreen="" loading="lazy" referrerPolicy="no-referrer-when-downgrade"></iframe>
      </p>
      <div className="contact-info">
        <br />
        <br />
        <br />
      <img className="img-contact" src="favicon.ico" draggable="false"></img>
      <br />
      <a href="https://www.instagram.com/and__volleyball/">
        <InstagramFilled style={{ fontSize: '30px', color: 'rgb(230, 9, 178)' }}/>
      </a>
      <a href="https://www.facebook.com/andvolleyball/">
        <FacebookFilled style={{ fontSize: '30px', color: 'rgb(230, 9, 178)' }}/>
      </a>
      <br />
      <br />
      <br />
  
      © 2022 AND... VOLLEYBALL ACADEMY. ALL RIGHTS RESERVED.
  
      <br />
      <br />
      <br />
      <br />
  
  
    </div>
    </div>
  </div>
    );
}

export default App;

Answer 1

您正在使用导致此错误的可选链接 (?.)。

如果您使用的是 CreatReactApp，请使用 react-scripts 3.0+ 版本。

<div>
 {user && <>
 // user.displayName instead of user?.displayName will fix this error
 {user.displayName ? <button id="signin-btn" onClick={function(){sign_out()}} className="btn">Logout</button> : <button id="signin-btn" onClick={function(){sign_in()}} className="btn">sign up</button>}
</> }
</div>