个人中心
gpt4 book ai didi

javascript - 无法解析模块说明符 "firebase/app"

转载 作者：行者123 更新时间：2023-12-05 00:34:47 25 4
gpt4 key购买 nike

这是我第一次使用 Firebase，我认为我已经按照所有步骤将我的项目连接到 Firebase。我试图用一个小的 js console.log(firebase) 运行我的项目当我转到控制台时，我收到了此错误消息 Failed to resolve module specifier "firebase/app"我想提一下，我已经创建了一个 node_module 文件夹，并且我做了 npm i firebase。
html 文件:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>TP1</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
        <script type="module" src="/index.js"> </script>
    </head>
    <body>
index.js: 
import { initializeApp } from "firebase/app";
//import { getDatabase } from "firebase/database";

const firebaseConfig = {
  //(my config...)
};


const app = initializeApp(firebaseConfig);
//const database = getDatabase(firebaseConfig);

console.log(firebase)

最佳答案

当您使用 import { ... } from "some/package" ，您应该使用像 Webpack 这样的捆绑程序或 Rollup在访问网站之前编译您的代码。这会从您的依赖项中提取您需要的部分，以供您的代码使用。
尤其是在 SDK 的 v9+ 中，Firebase SDK 被重写以支持这些捆绑程序，因此预计您看到的许多代码示例都是为现已弃用的 v8 或更早版本编写的。 this migration guide 中介绍了如何移动这个旧代码。 .
该指南的一个关键要点是 firebase不再是全局对象。由于您是 Firebase 的新手，我会避免编写任何使用旧语法的代码。您可以通过查找 firebase.initializeApp() 之类的代码来发现较旧的语法。 , firebase.database() , firebase.firestore()等等。在 SDK 中，这些示例已替换为 initializeApp() , getDatabase()和 getFirestore()分别。
如果您打算直接在浏览器中使用模块化代码(使用 <script type="module" src="..."></script> )，请务必记住代码与浏览器控制台隔离 - 您不能运行 console.log(firebaseConfig)并期望它有你的对象。
下一部分不针对生产代码，仅用于在熟悉的环境中进行尝试。
如果您想在浏览器控制台中修改 Firebase 库，您将添加类似于以下内容的内容:

<script type="module">
  window.FIREBASE_MODULES = window.FM = {};

  async function loadFirebaseModule(serviceName, sinkErrors) {      
    const name = serviceName.toLowerCase();
    if (window.FIREBASE_MODULES[name]) return window.FIREBASE_MODULES[name];
      
    try {
      // uses unpkg to get the latest semver
      if (!loadFirebaseModule.version) {
        const response = await fetch("https://unpkg.com/firebase/firebase-app.js", { method: "HEAD" });
        const match = /@\d+(?:\.\d+)*/.exec(response.url);
        if (!match) {
          console.log("Unexpected resource URL (SemVer could not be determined, falling back to v9.0.0): " + response.url);
          loadFirebaseModule.version = "9.0.0";
        } else {
          loadFirebaseModule.version = match[0].slice(1);
        }
      }
      
      // use the found semver to pull from Google's CDN
      const module = await import(`https://www.gstatic.com/firebasejs/${loadFirebaseModule.version}/firebase-${name}.js`);
      window.FIREBASE_MODULES[name] = module;
        
      console.log(`Successfully imported "${name}" module`)
      return module;
    } catch (err) {
      if (sinkErrors) {
        console.error(`Failed to import "${name}" module`, err);
      } else {
        throw err;
      }
    }
  }
  window.loadFirebaseModule = loadFirebaseModule;
</script>
现在，这个小片段将允许您在页面内或浏览器的控制台中运行这样的代码。它返回一个 Promise，因此如果您在脚本中使用它，请确保等待它完成解析。 
loadFirebaseModule('app')
  .then(({ initializeApp }) => {
    initializeApp({ /* ... config ... */ });
  });

loadFirebaseModule('storage');
loadFirebaseModule('storage', true); // import & ignore the error
加载模块后，您可以使用 const { getApp } = FM.app类似于您将如何使用 import { getApp } from "firebase/app" .

关于javascript - 无法解析模块说明符 "firebase/app"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69230383/

25 4 0
文章推荐： javascript - 更改 Fullcalendar React 组件的语言
文章推荐： javascript - createUserWithEmailAndPassword 后的 Firebase 错误 auth/admin-restricted-operation
文章推荐： javascript - 未找到此依赖项 : *swiper/vue how to fix?
文章推荐： javascript - 如何通过浏览器(Chrome)在运行时引发 javascript 错误？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com