未捕获的语法错误：无法在模块外部使用 import 语句（使用 Firebase）

Question

我在通过 html 表单将数据存储到数据库时遇到问题，我收到的错误来自我的导入语句，即：未捕获的语法错误：无法在模块外部使用导入语句！

代码如下：

import {
  initializeApp
} from "firebase/app";
const firebaseConfig = {
  apiKey: "MY_API_KEY", //actual values are in my code, changed here for security purposes.

  authDomain: "My_auth_Domain",
  databaseURL: "FirebaseDb_URL",
  projectId: "Project_id",
  storageBucket: "storageBucket",
  messagingSenderId: "SenderId",
  appId: "appId"
};



const app = initializeApp(firebaseConfig);


let inviteInfo = firebase.database().ref("inviteinfos");


document.getElementById("#regform", submitForm);

function submitForm(e) {
  let name = document.getElementsByName("fullname").value;
  let compName = document.getElementsByName("compName").value;
  let email = document.getElementsByName("email").value;
  let address = document.getElementsByName("address").value;
  let contact = document.getElementsByName("contact").value;
  console.log(name, compName, email, address, contact);

  saveContactInfo(name, compName, email, address, contact);
  document.getElementById("#regform").reset();
}

到目前为止我尝试过的：

1. 将导入语句更改为以下内容

const {initializeApp} = require("firebase/app");

2. 使用 firebase 提供的导入链接

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.6/firebase-app.js";

3. 使用 const 与 firebase 提供的链接：

const {initializeApp} = require("https://www.gstatic.com/firebasejs/9.6.6/firebase-app.js");

4. 使用 module 类型的脚本标签将 js 从 app.js 移至主 html 页面。
5. 使用

   npm to install firebase

   检索模块。
6. 关于基于链接的解决方案，我尝试删除 -app 以查看它是否有影响，但没有。

到目前为止，这些都对我不起作用，我试图存储信息的表当前不存在，但研究表明，即使在没有表存在的情况下运行也会自动为我创建表。

Answer 1

像这样加载

app.js

：

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

在

app.js

中，您可以像这样导入

firebase-app

：

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.6/firebase-app.js";
// ...

这是一个示例（我无法为

app.js

使用单独的文件，但这表明它确实有效）：

<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.6/firebase-app.js";
// Check that it worked and returned a function:
console.log(typeof initializeApp); // "function"
</script>

您根本不需要

script

的

firebase-app.js

标签，它会因为您的

import

而被浏览器加载。

请注意，这将在浏览器中使用本机模块。所有现代浏览器都直接支持这样做，但过时的浏览器（例如 Internet Explorer）不支持这样做，并且像这样单独加载模块可能涉及大量小型 HTTP 调用，而不是一些较大的调用，即使使用现代网络协议（例如SPDY。因此，人们经常使用 Vite、Rollup、Webpack 等捆绑器将模块组合成少量捆绑文件。如果你愿意，你可以考虑这样做。但同样，现代浏览器本身就支持模块，因此您不必这样做。

---

在您想要从 firebase-app 导入的每个地方使用

"https://www.gstatic.com/firebasejs/9.6.6/firebase-app.js"

可能会有点痛苦。您有两种选择可以让事情变得更容易：

1.在基于 Chromium 的浏览器中（，遗憾的是，目前），您可以使用 导入映射：

<script type="importmap">
{
    "imports": {
        "firebase/app": "https://www.gstatic.com/firebasejs/9.6.6/firebase-app.js"
    }
}
</script>

这告诉您的浏览器，当您从

"firebase/app"

导入时，它应该使用

"https://www.gstatic.com/firebasejs/9.6.6/firebase-app.js"

。

实例：

<script type="importmap">
{
    "imports": {
        "firebase/app": "https://www.gstatic.com/firebasejs/9.6.6/firebase-app.js"
    }
}
</script>

<script type="module">
import { initializeApp } from "firebase/app";
// Check that it worked and returned a function:
console.log(typeof initializeApp); // "function"
</script>

2.如果您无法使用导入映射，您可以编写一个模块，从

firebase-app

重新导出所有内容，然后从代码中的该模块导入，而不是直接从

firebase-app

:

您自己的本地

firebase-app.js

文件：

// This re-exports all of its named exports (but not its default, if any)
export * from "https://www.gstatic.com/firebasejs/9.6.6/firebase-app.js";
/* firebase-app.js doesn't provide a default export. If it did, this is
   how you'd re-export it:
export { default } from "https://www.gstatic.com/firebasejs/9.6.6/firebase-app.js";
*/

然后

app.js

会使用

firebase-app.js

:

import { initializeApp } from "./firebase-app.js";

（我无法使用 Stack Snippets 做一个现场示例，但是 这是 CodeSandbox 上的示例。）