未捕获的类型错误：无法解析模块说明符“firebase/app”。相对引用必须以“/”、“./”或“../”开头答案

【问题标题】：Uncaught TypeError: Failed to resolve module specifier "firebase/app". Relative references must start with either "/", "./", or "../"未捕获的类型错误：无法解析模块说明符“firebase/app”。相对引用必须以“/”、“./”或“../”开头
【发布时间】：2021-03-15 19:53:10
【问题描述】：

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

main.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 = {
  ...
};

【问题讨论】：

您介意确认 firebase 已正确安装为 package.json 中的依赖项吗？如果不是，那可能就是问题所在。
它安装正确，因为在 package.json : ``` "dependencies": { "firebase": "^8.3.0" } ``
你在 node_modules 文件夹中看到了 firebase 模块吗？
是的，在那儿
这里有同样的问题。有解决这个问题的希望吗？

标签： javascript html firebase

【解决方案1】：

我有同样的问题。我会告诉你我是如何解决的：

首先尝试使用 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 等模块 Bundlers……我使用了 Webpack，它们有很多关于它的教程。

如果您使用的是模块捆绑器，它会将您的 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 没有编译。

希望对你有所帮助。和平

【讨论】：

【解决方案2】：

你可以使用CDN

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.4.0/firebase-app.js";
import {
  getAuth,
  onAuthStateChanged,
} from "https://www.gstatic.com/firebasejs/9.4.0/firebase-auth.js";

⚠️注意⚠️ 当您需要服务时，只需更改链接末尾的文件名

【讨论】：

【解决方案3】：

他们遵循 webpack 方法，为此他们必须安装 node js。 https://webpack.js.org/guides/getting-started/

【讨论】：

仅链接的答案是无用的。你能详细说明一下吗？
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。