从 CDN JS 导入 firebase firestore 不起作用

2024-04-02

我正在从 CDN 导入 Firebase Firestore 以在本地服务器上运行。我按照文档所述将其导入,就在这里:https://firebase.google.com/docs/web/alt-setup 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.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文件索引.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>

示例项目:

这就是全部,我希望它对你有用????

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

从 CDN JS 导入 firebase firestore 不起作用 的相关文章

  • Web SQL 将数据插入多行

    我尝试在 Web SQL 数据库中一次将变量插入多行 但使用我所知的所有方法时 我收到错误 INSERT INTO tab a b VALUES v1 v2 v3 v4 gt gt could not prepare statement 1
  • 找不到模块:您尝试导入位于项目 src/ 目录之外的模块。不支持 src/ 之外的相对导入

    我刚刚开始React JS 但是我遇到了一个问题 尽管我进行了研究 但我无法得到结果 我尝试了很多方法 但我一直无法解决这个问题 你能帮忙吗 这是我在终端收到的错误 src App css node modules react script
  • 如何将变量传递给函数引用?

    在 React Native 中 当你有需要在渲染时运行并且必须传递变量的函数时 大多数人建议应该使用 onPress gt this functionName variable 然而 当处理大型列表和复杂组件时 您必须优化代码 为每个 r
  • jquery .load() 不起作用

    我似乎无法让 jquery 的 load 函数工作 一定是我缺少的一些简单的东西 基本上只是试图将 more html 的片段加载到 index html 中 索引 html
  • 如何在 javascript/jquery 中进行非阻塞睡眠?

    如何在 javascript jquery 中进行非阻塞睡眠 冒着从评论者那里窃取答案的风险 请使用设置超时 https developer mozilla org en US docs Web API WindowTimers setTi
  • 提交后如何重置表单?

    我有一个简单的表格 假设它需要一个电子邮件地址 提交表单后 消息堆栈会通知用户其地址已成功提交 问题是 提交地址后 带有电子邮件的表单字段仍然包含用户输入的电子邮件地址 我该如何重置该字段 我必须为此使用 JavaScript 吗 谢谢 w
  • 将对象传递给jquery中的回调函数

    我最近正在开发小型聊天模块 该模块需要不断检查服务器是否有新消息 我正在向服务器发送 ajax 请求 服务器将保持连接 直到找到新消息 长轮询 Code var chatController function other variable
  • 降低 Nodejs 服务器上的 CPU 利用率

    我正在研究降低 CPU 利用率的有趣方法 在 NodeJS 服务器上 在我的研究过程中 我发现了以下文章 http engineering linkedin com nodejs blazing fast nodejs 10 perform
  • 使用 document.getElementById().style.height javascript 从 css 获取值

    请提供有关这个谜团的见解 我试图通过以下方式从 div 框中获取高度值 var high document getElementById hintdiv style height alert high 如果该属性包含在 div 标记中 我可
  • JavaScript 附加和前置与 jQuery 附加和前置

    QA Style 我最近读了一篇文章 里面说JavaScript已经实现了append and prepend受 jQuery 启发的方法 这对我来说是一个新知识 因为据我所知 要附加一个元素 我必须使用element appendChil
  • 从右到左的语言和编程问题

    我正在创建一个网络文本编辑器 它使用我创建的新语言 如 BBcode 这种标记语言将采用阿拉伯语 但我面临这些问题 在所有 IDE 和编辑器中将英语和阿拉伯语文本混合在同一行中确实很困难 因为会发生奇怪的事情 单词和字符的顺序发生变化 使用
  • 传单地图显示为灰色

    我正在启动 leaflet js快速开始 http leafletjs com examples quick start html但我的地图显示为灰色 我缺少什么吗 脚本 js var leafletMap L map leafletMap
  • 如何判断CKEditor是否已加载?

    如何确定 CKEditor 是否已加载 我查看了API文档 但只能找到loaded事件 我想检查 CKEditor 是否已加载 因为如果我第二次加载它 我的文本区域就会消失 The loaded活动对我不起作用 instanceReady
  • 如何从 JavaScript 中的 URL 中提取主机?

    捕获域直到结束字符 我需要一个捕获的正则表达式example com在所有这些中 example com 3000 example com pass gas example com example com 如果您确实有有效的 URL 那么这
  • 解析器阻塞与渲染阻塞

    我一直在阅读有关优化网络性能的 Google 开发人员文档 我对那里使用的术语有点困惑 CSS 和 JavaScript 文件都会阻止 DOM 构建 但是 CSS 被称为渲染阻塞 而 JavaScript 被称为解析器阻塞 解析器阻塞 和
  • 如何获取元素相对于当前屏幕位置的偏移量?

    我正在尝试用纯 Javascript 重构所有 jQuery 除了非常具体的值之外 一切都正常工作 根据此代码的浏览器供应商 我得到了不同的值 对于 jQuery 我会使用 var topSelected figure offset top
  • 包括来自raw.github.com的js

    我有一个 github com 演示页面 链接到https raw github com master file js https raw github com master file js这样我就不需要总是复制 js文件转移到gh pag
  • 使用 puppeteer 部署 firebase 功能时说即使我启用了 --no-sandbox 也找不到 chrome

    我正在尝试将 firebase 函数部署到使用 puppeteer 的 firebase 项目 我让它在本地计算机上运行 但是当它尝试在 firebase 上运行时 我收到此错误 Exception from a finished func
  • 加密 Chrome 扩展程序?

    无论如何 要加密 Chrome 扩展程序 以免暴露源代码 您可以使用混淆器隐藏您的代码 市场上有很多可用的 像Google Closure编译器这样的工具很少 而且市场上有很多在线javascript ofuscators 你可以使用任何一
  • jQuery() 与 jQuery.parseHtml() 空格语法错误

    我有一行 javascript 导致 jQuery 中出现语法错误 document find Container replaceWith data find Content 代码本身如果相当无害的话 它所做的只是从 ajax 调用获取响应

随机推荐