0
158
VistasUsing Firebase with npm
I would like to use Firebase in my project with NPM and I installed it using "npm i firebase". This worked fine so I made a new file called "app.js". Here I would like to put my Firebase code, but it's not working, I get the following error message in my console:
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
I put the script in my in HTML with type="module":
<script src="./app.js" defer type="module"></script>
How can I fix this? Here's my Firebase code that's in 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")
})
Thanks in advance!
EDIT: Pictures of my node modules folder and firebase.
1 Respuestas
Responde la pregunta0
Try using it as a normal text/javascript instead of module
Since modules normally use strict mode, it probably doesn't have all the features of a module resulting in the file not loading as expected, as stated here in the core JS module features
https://javascript.info/modules-intro#core-module-features
Edit: The issue is with the path to the file you're importing. As seen in the screenshot below, this is the directory structure in '......node_modules/firebase/app':
So, the file you're importing actually doesn't exist there, that's why the 404 error HTML page.
That method works when running the app in a node environment, like React. Now for a browser, there are some files just within the '......node_modules/firebase/' directory which can be used in a web-browser environment
For your project, the files are:
firebase-app.js
firebase-auth.js
firebase-database.js
As in the screenshot below
So to import them in your file, do it this way:
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";