javascript - 如何修复 GET https://app/node_modules/firebase/compat/app net::ERR_ABORTED 404？
问题描述
我目前正在尝试使用 firebase 实时数据库创建一个网站。我是新手，所以我真的不明白出了什么问题。
如果我运行 index.js 脚本，我已经设法从我的 firebase 数据库中获取信息
Object {nom: "Mister", prenom: "Someone"}
但是，在进行 firebase 部署时，我在 html 页面上收到此错误：
index.js:4 GET https://<app-name>/node_modules/firebase/compat/app net::ERR_ABORTED 404
这是我的文件夹：
我的html页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Firebase Hosting</title>
<link rel="shortcut icon" href="#">
<link rel = "stylesheet" href="src/style.css">
<!-- update the version number as needed -->
<script defer src="/__/firebase/9.1.0/firebase-app-compat.js"></script>
<!-- include only the Firebase features as you need -->
<script defer src="/__/firebase/9.1.0/firebase-database-compat.js"></script>
<script defer src="/__/firebase/9.1.0/firebase-analytics-compat.js"></script>
<!--
<script defer src="/__/firebase/9.1.0/firebase-firestore-compat.js"></script>
<script defer src="/__/firebase/9.1.0/firebase-functions-compat.js"></script>
<script defer src="/__/firebase/9.1.0/firebase-performance-compat.js"></script>
<script defer src="/__/firebase/9.1.0/firebase-remote-config-compat.js"></script>
<script defer src="/__/firebase/9.1.0/firebase-storage-compat.js"></script>
<script defer src="/__/firebase/9.1.0/firebase-messaging-compat.js"></script>
<script defer src="/__/firebase/9.1.0/firebase-auth-compat.js"></script>
initialize the SDK after all desired features are loaded, set useEmulator to false
to avoid connecting the SDK to running emulators.
-->
<script defer src="/__/firebase/init.js?useEmulator=true"></script>
<style media="screen">
body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
#message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px; border-radius: 3px; }
#message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
#message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
#message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
#message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
#message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
#load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
@media (max-width: 600px) {
body, #message { margin-top: 0; background: white; box-shadow: none; }
body { border-top: 16px solid #ffa100; }
}
</style>
</head>
<body>
<div id="message">
<h2>Welcome</h2>
<h1>Firebase Hosting Setup Complete</h1>
<p>You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!</p>
<a target="_blank" href="https://firebase.google.com/docs/hosting/">Open Hosting Documentation</a>
</div>
<p id="load">Firebase SDK Loading…</p>
<button id="submitPost" type="submit" class="btn">Submit</button>
<script>
document.addEventListener('DOMContentLoaded', function() {
const loadEl = document.querySelector('#load');
// //
// // The Firebase SDK is initialized and available here!
//
// firebase.auth().onAuthStateChanged(user => { });
// firebase.database().ref('/path/to/ref').on('value', snapshot => { });
// firebase.firestore().doc('/foo/bar').get().then(() => { });
// firebase.functions().httpsCallable('yourFunction')().then(() => { });
// firebase.messaging().requestPermission().then(() => { });
// firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { });
// firebase.analytics(); // call to activate
// firebase.analytics().logEvent('tutorial_completed');
// firebase.performance(); // call to activate
//
// //
try {
let app = firebase.app();
let features = [
'auth',
'database',
'firestore',
'functions',
'messaging',
'storage',
'analytics',
'remoteConfig',
'performance',
].filter(feature => typeof app[feature] === 'function');
console.log("database!!")
loadEl.textContent = `Firebase SDK loaded with ${features.join(', ')}`;
} catch (e) {
console.error(e);
loadEl.textContent = 'Error loading the Firebase SDK, check the console.';
}
});
</script>
<script type="module" src="src/index.js" defer></script>
</body>
</html>
我的 index.js：
console.log("himmm");
//../../node_modules/
import firebase from "../../node_modules/firebase/compat/app";
import "../../node_modules/firebase/compat/database";
//import { getDatabase, ref, child, get } from "firebase/firebase-database";
const firebaseConfig = {
...
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
//document.getElementById("submitPost").addEventListener("click", test)
function test(){
console.log("Test");
}
function readUserData(){
const dbRef = firebase.database().ref();
dbRef.child("users").child("0").get().then((snapshot) => {
if (snapshot.exists()) {
console.log(snapshot.val());
} else {
console.log("No data available");
}
}).catch((error) => {
console.error(error);
});
}
readUserData()
我的 package.json 文件：
{
"name": "mainproject",
"version": "1.0.0",
"main": "index.js",
"type": "module",
"scripts": {
"start": "node public/src/index.js"
},
"keywords": [],
"author": "Someone :)",
"license": "ISC",
"dependencies": {
"firebase": "^9.1.0"
},
"devDependencies": {},
"description": "Web app",
"exports": {
"./analytics": {
"node": {
"require": "./analytics/dist/index.cjs.js",
"import": "./analytics/dist/index.mjs"
},
"default": "./analytics/dist/index.esm.js"
},
"./app": {
"node": {
"require": "./app/dist/index.cjs.js",
"import": "./app/dist/index.mjs"
},
"default": "./app/dist/index.esm.js"
},
"./app-check": {
"node": {
"require": "./app-check/dist/index.cjs.js",
"import": "./app-check/dist/index.mjs"
},
"default": "./app-check/dist/index.esm.js"
},
"./auth": {
"node": {
"require": "./auth/dist/index.cjs.js",
"import": "./auth/dist/index.mjs"
},
"default": "./auth/dist/index.esm.js"
},
"./auth/cordova": {
"node": {
"require": "./auth/cordova/dist/index.cjs.js",
"import": "./auth/cordova/dist/index.mjs"
},
"default": "./auth/cordova/dist/index.esm.js"
},
"./auth/react-native": {
"node": {
"require": "./auth/react-native/dist/index.cjs.js",
"import": "./auth/react-native/dist/index.mjs"
},
"default": "./auth/react-native/dist/index.esm.js"
},
"./database": {
"node": {
"require": "./database/dist/index.cjs.js",
"import": "./database/dist/index.mjs"
},
"default": "./database/dist/index.esm.js"
},
"./firestore": {
"node": {
"require": "./firestore/dist/index.cjs.js",
"import": "./firestore/dist/index.mjs"
},
"default": "./firestore/dist/index.esm.js"
},
"./firestore/lite": {
"node": {
"require": "./firestore/lite/dist/index.cjs.js",
"import": "./firestore/lite/dist/index.mjs"
},
"default": "./firestore/lite/dist/index.esm.js"
},
"./functions": {
"node": {
"require": "./functions/dist/index.cjs.js",
"import": "./functions/dist/index.mjs"
},
"default": "./functions/dist/index.esm.js"
},
"./messaging": {
"node": {
"require": "./messaging/dist/index.cjs.js",
"import": "./messaging/dist/index.mjs"
},
"default": "./messaging/dist/index.esm.js"
},
"./messaging/sw": {
"node": {
"require": "./messaging/sw/dist/index.cjs.js",
"import": "./messaging/sw/dist/index.mjs"
},
"default": "./messaging/sw/dist/index.esm.js"
},
"./performance": {
"node": {
"require": "./performance/dist/index.cjs.js",
"import": "./performance/dist/index.mjs"
},
"default": "./performance/dist/index.esm.js"
},
"./remote-config": {
"node": {
"require": "./remote-config/dist/index.cjs.js",
"import": "./remote-config/dist/index.mjs"
},
"default": "./remote-config/dist/index.esm.js"
},
"./storage": {
"node": {
"require": "./storage/dist/index.cjs.js",
"import": "./storage/dist/index.mjs"
},
"default": "./storage/dist/index.esm.js"
},
"./compat/analytics": {
"node": {
"require": "./compat/analytics/dist/index.cjs.js",
"import": "./compat/analytics/dist/index.mjs"
},
"default": "./compat/analytics/dist/index.esm.js"
},
"./compat/app": {
"node": {
"require": "./compat/app/dist/index.cjs.js",
"import": "./compat/app/dist/index.mjs"
},
"default": "./compat/app/dist/index.esm.js"
},
"./compat/app-check": {
"node": {
"require": "./compat/app-check/dist/index.cjs.js",
"import": "./compat/app-check/dist/index.mjs"
},
"default": "./compat/app-check/dist/index.esm.js"
},
"./compat/auth": {
"node": {
"require": "./compat/auth/dist/index.cjs.js",
"import": "./compat/auth/dist/index.mjs"
},
"default": "./compat/auth/dist/index.esm.js"
},
"./compat/database": {
"node": {
"require": "./compat/database/dist/index.cjs.js",
"import": "./compat/database/dist/index.mjs"
},
"default": "./compat/database/dist/index.esm.js"
},
"./compat/firestore": {
"node": {
"require": "./compat/firestore/dist/index.cjs.js",
"import": "./compat/firestore/dist/index.mjs"
},
"default": "./compat/firestore/dist/index.esm.js"
},
"./compat/functions": {
"node": {
"require": "./compat/functions/dist/index.cjs.js",
"import": "./compat/functions/dist/index.mjs"
},
"default": "./compat/functions/dist/index.esm.js"
},
"./compat/messaging": {
"node": {
"require": "./compat/messaging/dist/index.cjs.js",
"import": "./compat/messaging/dist/index.mjs"
},
"default": "./compat/messaging/dist/index.esm.js"
},
"./compat/performance": {
"node": {
"require": "./compat/performance/dist/index.cjs.js",
"import": "./compat/performance/dist/index.mjs"
},
"default": "./compat/performance/dist/index.esm.js"
},
"./compat/remote-config": {
"node": {
"require": "./compat/remote-config/dist/index.cjs.js",
"import": "./compat/remote-config/dist/index.mjs"
},
"default": "./compat/remote-config/dist/index.esm.js"
},
"./compat/storage": {
"node": {
"require": "./compat/storage/dist/index.cjs.js",
"import": "./compat/storage/dist/index.mjs"
},
"default": "./compat/storage/dist/index.esm.js"
}
},
"./package.json": "./package.json"
}
此外，当像这样导入时：
import firebase from "firebase/compat/app"
我在 html 页面上有这个错误：
Uncaught TypeError: Failed to resolve module specifier "firebase/compat/app". Relative references must start with either "/", "./", or "../".
所以我必须写：
import firebase from "../../node_modules/firebase/compat/app"
如果有人可以帮忙。
解决方案
推荐阅读
- azure-devops - Azure DevOps：在 Azure SQL 发布部署中，缺少以下 SqlCmd 变量的值：env master
- node.js - 如何在 WebStorm 中调试使用 TypeScript 运行的 node.js 应用程序？
- javascript - 如何创建具有 2 个或多个具有不同大小的对象属性的新对象并设置新属性
- node.js - 使用 Fastify 和 Nestjs 上传文件错误
- php - 更改数组的键
- gcc - Octave 4.2.2 在使用 c++14 编译时存在模棱两可的问题
- visual-studio - conhost 与 cmd -> Windows 注册表
- c# - 使用格式化程序序列化 XML
- modbus - 如果我重叠多寄存器 Modbus 数据项可能会出现什么问题？
- multithreading - popen 真的是线程安全的吗？