从CDN JS导入firebase firestore不工作

dba5bblo 于 2023-08-07 发布在其他

关注(0)|答案(6)|浏览(123)

我正在从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项目，我不知道如何前进。任何帮助或建议将感谢这个新手。如果你需要更多的信息，让我知道，谢谢。

firebase

来源：https://stackoverflow.com/questions/70732003/import-firebase-firestore-from-cdn-js-not-working

6条答案

按热度按时间

hgqdbh6s1#

导入的一种方法是，首先创建一个名为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>

型
示例项目：

的数据
这就是全部，我希望它能为你工作？？

赞(0）回复(0）举报 2023-08-07

fhg3lkii2#

我认为该来源已被弃用。原因解释写成这样，来源于此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
希望这能帮到你。

赞(0）回复(0）举报 2023-08-07

cdmah0mi3#

你在脚本标签中输入这个了吗

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

赞(0）回复(0）举报 2023-08-07

afdcj2ne4#

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

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'

字符串

赞(0）回复(0）举报 2023-08-07

gmxoilav5#

是的，它不提供名为“firestore”的导出，但是

import { getFirestore } from "https://www.gstatic.com/firebasejs/9.n.n/firebase-firestore.js";
const firestore = getFirestore();
console.log(firestore);

字符串
是的
请参见：getFirestore（）

赞(0）回复(0）举报 2023-08-07

9rygscc16#

如果由于angular的较新版本中的一些全局错误而导致上述方法都不起作用，请在最后使用compat尝试此CDN。
importScripts（'https：//www.gstatic.com/firebasejs/9.0.0/firebase-app-compat.js'）; importScripts（'https：//www.gstatic.com/firebasejs/9.0.0/firebase-messaging-compat.js'）;
这些都是为我在控制台生成令牌而工作的。

赞(0）回复(0）举报 2023-08-07

我来回答

从CDN JS导入firebase firestore不工作

6条答案

相关问题

热门标签

最新问答