Uncaught :无法使用模块外部的导入语句(使用Firebase)
我在通过html表单将数据存储到数据库时遇到了问题，我得到的错误来自导入语句，即: Uncaught SyntaxError:无法在模块外使用导入语句！
代码如下：
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();
}到目前为止，我已经尝试过：
- 将导入语句更改为
const {initializeApp} = require("firebase/app");- 已使用的导入与提供的防火墙链接
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.6/firebase-app.js";- 与提供的火源链接一起使用：
const {initializeApp} = require("https://www.gstatic.com/firebasejs/9.6.6/firebase-app.js");- 使用类型模块的脚本标记将js从app.js移动到主html页面。
- 使用
npm to install firebase检索模块。 - 关于基于链接的解决方案，我试图删除-app，看看它是否产生了影响，但没有。
到目前为止，所有这些都没有对我有效，我试图将信息存储到的表目前还不存在，但是研究表明，即使没有存在的表，运行也会自动为我创建表。
回答 1
Stack Overflow用户
发布于 2022-02-16 09:32:45
像这样加载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 )却不支持，而单独加载这样的模块可能需要大量的小HTTP调用，而不是几个较大的调用，即使使用像SPDY这样的现代网络协议，也会导致页面加载延迟。因此，人们经常使用像Vite、Rollup、Webpack等捆绑器，将模块组合成少量的包文件。如果你愿意的话，你可以看看。但是，现代浏览器本机支持模块，所以您不必这样做。
在您想要从firebase导入的每一个地方使用"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>这告诉浏览器，当您从"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>
- 如果不能使用导入映射，则可以编写一个模块，从
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代码片段来做一个活生生的例子，但是这是CodeSandbox上的。)
https://stackoverflow.com/questions/71139008
复制相似问题
腾讯云开发者
