สวัสดีทุกคนสบายดีไหม หวังว่าทุกคนสบายดี วันนี้ฉันกำลังใช้ firebase ในแอพของฉัน แต่ฉันพบข้อผิดพลาดดังต่อไปนี้ ข้อผิดพลาดในการนำเข้าที่พยายาม: ‘firebase/app’ ไม่มีการส่งออกเริ่มต้น (นำเข้าเป็น ‘firebase’) ใน ReactJs. ดังนั้นฉันอธิบายให้คุณทราบถึงวิธีแก้ปัญหาที่เป็นไปได้ทั้งหมดที่นี่

โดยไม่เสียเวลา มาเริ่มบทความนี้เพื่อแก้ไขข้อผิดพลาดนี้กัน

ข้อผิดพลาดในการนำเข้าที่พยายาม: ‘firebase/app’ ไม่มีข้อผิดพลาดในการส่งออกเริ่มต้น (นำเข้าเป็น ‘firebase’)

วันนี้ฉันกำลังใช้ firebase ในแอพของฉัน แต่ฉันพบข้อผิดพลาดดังต่อไปนี้

./src/firebase.js Attempted import error: 'firebase/app' does not contain a default export (imported as 'firebase').

นี่คือรหัสของฉัน

import firebase from "firebase/app";
import "firebase/auth";

วิธีแก้ไขข้อผิดพลาดในการนำเข้าที่พยายาม: ‘firebase / app’ ไม่มีข้อผิดพลาดการส่งออกเริ่มต้น (นำเข้าเป็น ‘firebase’)

  1. วิธีแก้ไขข้อผิดพลาดในการนำเข้าที่พยายาม: ‘firebase / app’ ไม่มีข้อผิดพลาดการส่งออกเริ่มต้น (นำเข้าเป็น ‘firebase’)

    เพื่อแก้ไขข้อผิดพลาดในการนำเข้าที่พยายาม: ‘firebase/app’ ไม่มีการส่งออกเริ่มต้น (นำเข้าเป็น ‘firebase’) ข้อผิดพลาดหากคุณใช้เวอร์ชัน 9 อย่าลืมว่าสิ่งต่าง ๆ เปลี่ยนไปเล็กน้อยสำหรับการนำเข้า firebase ตอนนี้มี compatibility ดังนั้นสามารถใช้โฟลเดอร์ /compat ในการนำเข้าของคุณได้ นี่คือตัวอย่างแทนที่บรรทัดนี้ นำเข้าฐานไฟจาก firebase/app; ด้วย firebase นำเข้าจาก ‘firebase/compat/app’; วิธีที่สองคือ หากคุณพบข้อผิดพลาดนี้ ให้ปรับลดรุ่นเป็นรุ่น firebase ใด ๆ ที่ต่ำกว่า v9

  2. ข้อผิดพลาดในการนำเข้าที่พยายาม: ‘firebase/app’ ไม่มีการส่งออกเริ่มต้น (นำเข้าเป็น ‘firebase’)

    เพื่อแก้ไขข้อผิดพลาดในการนำเข้าที่พยายาม: ‘firebase/app’ ไม่มีการส่งออกเริ่มต้น (นำเข้าเป็น ‘firebase’) ข้อผิดพลาดหากคุณใช้เวอร์ชัน 9 อย่าลืมว่าสิ่งต่าง ๆ เปลี่ยนไปเล็กน้อยสำหรับการนำเข้า firebase ตอนนี้มี compatibility ดังนั้นสามารถใช้โฟลเดอร์ /compat ในการนำเข้าของคุณได้ นี่คือตัวอย่างแทนที่บรรทัดนี้ นำเข้าฐานไฟจาก firebase/app; ด้วย firebase นำเข้าจาก ‘firebase/compat/app’; วิธีที่สองคือ หากคุณพบข้อผิดพลาดนี้ ให้ปรับลดรุ่นเป็นรุ่น firebase ใด ๆ ที่ต่ำกว่า v9

โซลูชันที่ 1: ใช้โฟลเดอร์ /compat ในการนำเข้า

หากคุณกำลังใช้เวอร์ชัน 9 อย่าลืมว่าสิ่งต่าง ๆ เปลี่ยนไปเล็กน้อยสำหรับการนำเข้า firebase ตอนนี้มี compatibility จึงสามารถใช้ /compat โฟลเดอร์ในการนำเข้าของคุณ นี่คือตัวอย่าง

แทนที่บรรทัดนี้

import firebase from "firebase/app";

ด้วยสิ่งนี้.

import firebase from 'firebase/compat/app';

นี่คือตัวอย่างบางส่วนที่มีการเปลี่ยนแปลงในเวอร์ชัน 9

//to use firebase app
import firebase from 'firebase/app'; //older version
import firebase from 'firebase/compat/app'; //v9

//to use auth
import 'firebase/auth'; //older version
import 'firebase/compat/auth'; //v9

//to use firestore
import 'firebase/firestore'; //Older Version
import 'firebase/compat/firestore'; //v9

โซลูชันที่ 2: ปรับลดรุ่น firebase เวอร์ชัน

หากคุณพบข้อผิดพลาดนี้ ให้ดาวน์เกรดเป็นเวอร์ชัน firebase ที่ต่ำกว่า v9

โซลูชันที่ 3: สร้างวัตถุแอป Firebase เหมือนตัวอย่างด้านล่าง

  1. ติดตั้ง Firebase โดยใช้ npm
  2. npm ติดตั้ง firebase
  3. เริ่มต้น Firebase ในแอปของคุณและสร้างวัตถุแอป Firebase เช่นนี้ตัวอย่างด้านล่าง
import { initializeApp } from 'firebase/app';

// TODO: Replace the following with your app's Firebase project
configuration const firebaseConfig = {   //... };

const app = initializeApp(firebaseConfig);

Summery

มันคือทั้งหมดที่เกี่ยวกับปัญหานี้ หวังว่าวิธีแก้ปัญหาทั้งหมดจะช่วยคุณได้มาก แสดงความคิดเห็นด้านล่างความคิดและข้อสงสัยของคุณ แสดงความคิดเห็นด้านล่างว่าโซลูชันใดที่เหมาะกับคุณ