Using Firebase with npm

Question

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.

Answer 1

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";