0
157
VistasUsando Firebase con npm
Me gustaría usar Firebase en mi proyecto con NPM y lo instalé usando "npm i firebase". Esto funcionó bien, así que creé un nuevo archivo llamado "app.js". Aquí me gustaría poner mi código de Firebase, pero no funciona, me sale el siguiente mensaje de error en mi consola:
Error al cargar la secuencia de comandos del módulo: se esperaba una secuencia de comandos del módulo JavaScript, pero el servidor respondió con un tipo MIME de "texto/html". Se aplica una estricta verificación de tipo MIME para los scripts de módulo según la especificación HTML.
Puse el script en mi HTML con type="module":
<script src="./app.js" defer type="module"></script>¿Cómo puedo arreglar esto? Aquí está mi código de Firebase que está en app.js
//MODULE DUS GEEN IIFE // Import the functions you need from the SDKs you need import { initializeApp } from "../../node_modules/firebase/app"; import { getAuth, signInWithPopup, GoogleAuthProvider } from "../../node_modules/firebase/auth"; import { getDatabase } from "../../node_modules/firebase/database"; // TODO: Add SDKs for Firebase products that you want to use // https://firebase.google.com/docs/web/setup#available-libraries // Your web app's Firebase configuration // For Firebase JS SDK v7.20.0 and later, measurementId is optional const firebaseConfig = { apiKey: "", authDomain: "", projectId: "", storageBucket: "", messagingSenderId: "", appId: "", measurementId: "" }; // Initialize Firebase const app = initializeApp(firebaseConfig); const analytics = getAnalytics(app); const provider = new GoogleAuthProvider(); const auth = getAuth(); const database = getDatabase(app); signin.addEventListener("click", () => { console.log("hi") })¡Gracias por adelantado!
EDITAR: Imágenes de la carpeta de módulos de mi nodo y base de fuego. 
1 Respuestas
Responde la pregunta0
Intente usarlo como un texto normal/javascript en lugar de un módulo
Dado que los módulos normalmente usan el modo estricto , probablemente no tenga todas las características de un módulo, lo que hace que el archivo no se cargue como se esperaba, como se indica aquí en las características principales del módulo JS.
https://javascript.info/modules-intro#core-module-features
Editar: el problema es con la ruta al archivo que está importando. Como se ve en la siguiente captura de pantalla, esta es la estructura de directorios en ' ......node_modules/firebase/app ':
Entonces, el archivo que está importando en realidad no existe allí, es por eso que la página HTML de error 404.
Ese método funciona cuando se ejecuta la aplicación en un entorno de nodo, como React . Ahora, para un navegador, hay algunos archivos dentro del directorio ' ......node_modules/firebase/ ' que se pueden usar en un entorno de navegador web
Para su proyecto, los archivos son:
firebase-app.js firebase-auth.js firebase-database.jsComo en la captura de pantalla a continuación
Entonces, para importarlos en su archivo, hágalo de esta manera:
import { initializeApp } from "../../node_modules/firebase/firebase-app"; import { getAuth, signInWithPopup, GoogleAuthProvider } from "../../node_modules/firebase/firebase-auth"; import { getDatabase } from "../../node_modules/firebase/firebase-database";