How to stop the warning: It looks like you're using the development build of the Firebase JS SDK?

Question

It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.

For the CDN builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):

https://www.gstatic.com/firebasejs/5.0.0/firebase-<PACKAGE>.js

It takes half of my already limited console space :(

Note: I use firebase inside html .. with script tags. I don't use import syntax as explained here : similar question

How to stop this warning?

Answer 1

To answer this question a little more clearly,

What you most likely have is

<script src="https://www.gstatic.com/firebasejs/6.0.2/firebase.js"></script>

Because this is what Firebase gives you from the "Add Firebase to your web app" screen.

However, what this is doing is importing all of the Firebase modules. I don't know why Firebase has this as the generated script, but all you need to do is add -app to the source so it is now.

<script src="https://www.gstatic.com/firebasejs/6.0.2/firebase-app.js"></script>

Then with every subsequent feature of Firebase you would like to use, you would will need to add another script line. For example, if you would like to add cloud messaging to your web app it would only need.

<script src="https://www.gstatic.com/firebasejs/6.0.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.0.2/firebase-messaging.js"></script>

You can find more information including a complete list of imports here from Firebase.

Answer 2

Your error message tells you how to fix it... this part right here:

For the CDN builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):

https://www.gstatic.com/firebasejs/5.0.0/firebase-<PACKAGE>.js

So if you're using Firebase authentication you'd have a script tag requesting https://www.gstatic.com/firebasejs/5.0.0/firebase-auth.js ... and for the Firebase database you would also have another script tag with https://www.gstatic.com/firebasejs/5.0.0/firebase-database.js .... just following that pattern for any other portions of Firebase you need.

Answer 3

The details given here are not super easy to understand:

step 1: Remove below line, because it's development build:

<script src="https://www.gstatic.com/firebasejs/5.8.6/firebase.js"></script>

step 2: Add below line, (required), production build:

<script src="https://www.gstatic.com/firebasejs/5.8.6/firebase-app.js"></script>

step 3: Add any more packages/sevices you need, like database, (optional), production build:

<script src="https://www.gstatic.com/firebasejs/5.8.6/firebase-database.js"></script>

This solved the issue.