javascript - 未捕获的 TypeError : Failed to resolve module specifier "firebase/app". 相对引用必须以 "/"、 "./"或 "../"开头

标签 javascript html firebase

我已经关注了关于 WebRTC 视频聊天的 YouTube 教程,所以我尝试编写它。在 localhost 中它可以工作,但是一旦我将它上传到 firebase 托管它就会出现此错误。
我能做些什么?我是网络开发新手,请耐心等待
主要.hmtl

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebRtc Demo</title>
  </head>
  <body>

  <h2>Start Cam</h2>
  <div class ="videos">
    <span>
      <h3>Local</h3>
      <video id="webcamVideo" autoplay playsinline></video>
    </span>

    <span>
      <h3>Remote</h3>
      <video id="remoteVideo" autoplay playsinline></video>
    </span>
  </div>

  <button id="webcamButton">Start cam</button>

  <h2>New Call</h2>
  <button id="callButton">call</button>

  <input id="callInput"/>

  <button id="answerButton">Rispondi</button>
  <button id="hangupButton">Hangup</button>

  <script type="module" src="/main.js"></script>


</body> 
</html> 
Firebase.json
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "hosting": {
    "public": "/",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}
main.js
import firebase from 'firebase/app';
import 'firebase/firestore';
const firebaseConfig = {
  ...
};

最佳答案

我遇到过同样的问题。我会告诉你我是如何解决的:
首先尝试使用 CDN 从谷歌服务器导入 firebase 模块。看这里:

     import { initializeApp } from "https://www.gstatic.com/firebasejs/9.4.0/firebase-app.js";
  import { getFirestore, doc, getDoc, getDocs, collection } from "https://www.gstatic.com/firebasejs/9.4.0/firebase-firestore.js";
这很好用。但为了提高效率,我猜你想使用 npm 在你的计算机上加载 firebase 模块。
在这种情况下,您绝对需要像 Webpack、Rollup、Parcel、Snowpack 等模块捆绑器...我使用了 网页包 ,他们有很多关于它的教程。
如果您使用的是模块捆绑器,它会将您的 main.js 文件编译成另一个文件,我们称之为 bundle.js。
然后解决这个问题:
<script type="module" src="/main.js"></script>
至 :
<script type="module" src="dist/bundle.js"></script>
或(取决于您如何设置路径)
<script type="module" src="bundle.js"></script>
所以你得到这个错误是因为你的 main.js 没有编译。
我希望这对你有帮助。和平

关于javascript - 未捕获的 TypeError : Failed to resolve module specifier "firebase/app". 相对引用必须以 "/"、 "./"或 "../"开头,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66644782/

相关文章:

javascript - react 得到所有 child 的引用

javascript - 导入路径中的 @ 是什么意思?

javascript - 复选框值的总和

javascript - Reactjs 和 2 个元素动画一次

html - Safari 9 中的子框未垂直居中

javascript - CSS 不会使用 Node.js 加载到我的 HTML 代码中

javascript - 如何使 JavaScript 链接可通过中键单击打开?

xcode - 如何使用 Firebase Swift 3 创建 CompletionHandler

javascript - 错误 : Query. 失败:第一个参数必须是对象

laravel - 将 Firebase Firestore 连接到 laravel