How to avoid Firebase warning that I’m using the development build?

问题

I'm making a login page for my ReactJS app using the firebase auth package.

I have imported the auth package in my global firebase file:

import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';

const config = {
    apiKey: "xxx",
    authDomain: "xxx",
    databaseURL: "xxx",
    projectId: "xxx",
    storageBucket: "xxx",
    messagingSenderId: "xxx"
};

export default firebase.initializeApp(config);

Now in my LoginComponent I need to access the classFacebookAuthProvider which is part of the firebase.auth namespace. In order to get access to this class I import the auth namespace.

import React, { Component } from 'react';
import { auth } from 'firebase';

class Login extends Component {
    provider = new auth.FacebookAuthProvider();

Because of this last import I’m getting the following warning in my console:

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 module builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):

CommonJS Modules:
const firebase = require('firebase/app');
require('firebase/<PACKAGE>');

ES Modules:
import firebase from 'firebase/app';
import 'firebase/<PACKAGE>';

After going through so much documentation and code I still haven’t been able to figure out how to get rid of this warning while being able to access the FacebookAuthProvider class.

A second question: Am I actually using the full firebase development SDK at this moment? I only imported the auth namespace, right??

回答1:

Your login component is importing the full Firebase SDK, which is what leads to that warning. You will have to import only the parts that you need. Your bundler or browser will dedupe if the same file has been loaded already.

Change this:

import React, { Component } from 'react';
import { auth } from 'firebase';

To this:

import React, { Component } from 'react';
import firebase from 'firebase/app';
import 'firebase/auth';

来源：https://stackoverflow.com/questions/51769322/how-to-avoid-firebase-warning-that-i-m-using-the-development-build