Skip to content
Advertisement

Module blocked because of a disallowed MIME type (“text/html”)

enter image description here

I am getting module block error when ever I try to import firebase module

My code is as followed :

JavaScript

My file architecture is :

JavaScript

Advertisement

Answer

By using this line:

JavaScript

You are requesting the browser to fetch the Firebase App library module from the URL https://yourproject.web.app/firebase/app. Because the .js extension is missing, the hosting server is trying to send back the page https://yourproject.web.app/firebase/app.html with a MIME type of text/html (instead of app.js with a MIME type of text/javascript). Additionally, because this app.html probably doesn’t exist, it is also sending back a 404.html page.


The modern Firebase libraries are intended to be put through a module bundler like Webpack or Rollup before being served to a browser as covered in the Firebase Getting Started documentation.

But that document also highlights the following point:

Do you use ESM and want to use browser modules? Replace all your import lines to use the following pattern:

import { } from 'https://www.gstatic.com/firebasejs/9.10.0/firebase-SERVICE.js' (where SERVICE is an SDK name such as firebase-firestore).

Using browser modules is a quick way to get started, but we recommend using a module bundler for production.

So to correct your imports, you need to use:

JavaScript

Note: To save future headaches, I recommend learning and setting up your module bundler now.

Advertisement