从 CDN JS 导入 firebase firestore 不起作用答案

【问题标题】：Import firebase firestore from CDN JS not working从 CDN JS 导入 firebase firestore 不起作用
【发布时间】：2022-04-05 04:09:13
【问题描述】：

我正在从 CDN 导入 Firebase Firestore 以在本地服务器上运行。我按照文档的说明导入了它，就在这里：https://firebase.google.com/docs/web/alt-setup

我的代码：

  import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js';
import { getAuth, createUserWithEmailAndPassword } from 'https://www.gstatic.com/firebasejs/9.0.0/firebase-auth.js';
import { firestore } from 'https://www.gstatic.com/firebasejs/9.6.3/firebase-firestore.js'

问题： Firebase 应用程序和 Firebase 身份验证已导入并且可以正常工作，但是 Firestore 没有被导入。我收到此错误：

Uncaught SyntaxError: The requested module 'https://www.gstatic.com/firebasejs/9.6.3/firebase-firestore.js' does not provide an export named 'firestore'

这是我第一个使用 firebase 的 Web 项目，我不知道如何继续。这个新手将不胜感激任何帮助或建议。如果您需要更多信息，请告诉我，谢谢。

【问题讨论】：

标签： javascript firebase google-cloud-firestore import cdn

【解决方案1】：

我认为该来源已被弃用。原因写成这样的解释，来自这个来源https://firebase.google.com/docs/web/alt-setup#from-the-cdn

对于大多数 Firebase Web 应用，我们强烈建议通过 npm 使用 SDK 版本 9。

我找到了两种方式，在版本 8 中你仍然可以使用这种方式。

<body>
    <!-- Insert this script at the bottom of the HTML, but before you use any Firebase services -->
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-firestore.js"></script>
</body>

但是如果你想在版本 9 中使用，你必须使用 npm。

npm install firebase@9.4.1 --save

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

您可以访问：https://firebase.google.com/docs/firestore/quickstart#web-version-9

希望这可以帮助你。

【讨论】：

【解决方案2】：

一种导入方法是，首先创建一个名为 firebase.js 的文件并粘贴此代码：

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js";  
import { getFirestore, getDocs, collection } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js";

//add your credentials from firebase project
const firebaseConfig = {
  apiKey: "YOUR-apiKey-nCVgNHJXTs",
  authDomain: "YOUR-authDomain.firebaseapp.com",
  projectId: "YOUR-projectId-fb",
  storageBucket: "YOUR-storageBucket-fb.appspot.com",
  messagingSenderId: "YOUR-messagingSenderId",
  appId: "YOUR-appId-web:11c8d54e0"
};

const app = initializeApp(firebaseConfig);
const db = getFirestore();

//create your custom method
export const getWolfs = () => {
  return getDocs(collection(db, "yourNameCollection"));
};

现在，您可以创建一个名为 main.js 的新文件并粘贴以下代码：

import { getWolfs } from './firebase.js';

//suppose you want to display the list of wolves in the browser console
window.addEventListener("DOMContentLoaded", async (e) => {
    const querySnapshot = await getWolfs();
    querySnapshot.forEach((doc) => {
        console.log(doc.data());
    });
});

最后创建html文件index.html并粘贴这段代码：

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>firebase</title>
</head>
    <body>
        <h2>wolves</h2>
        <!--main app-->
        <script type="module" src="./main.js"></script>
    </body>
</html>

示例项目：

就是这样，我希望它对你有用?

【讨论】：

【解决方案3】：

你有没有在脚本标签中输入这个

<body>
  <script type="module">
    // ...

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

    // Initialize Firebase
    const app = initializeApp(firebaseConfig);
  </script>
</body>

type=module?

【讨论】：

是的，我有，我在另一个文件中有 JS，这是脚本标签<script type="module" src="../JS/fileSignUpFinal.js"></script>
我添加了新答案，我认为应该解决

【解决方案4】：

试试这个，这个问题跟你类似

import { function } from 'https://www.gstatic.com/firebasejs/9.6.3/firebase-SERVICE.js'

//Example
import { function } from 'https://www.gstatic.com/firebasejs/9.6.3/firebase-firestore.js'

【讨论】：