Предупреждение: похоже, вы используете сборку разработки Firebase JS SDK

Question

Я интегрировал Firebase в свое приложение React.js следующим образом: https://firebase.google.com/docs/database/web/start

fire.js:

import firebase from 'firebase'

var config = {
  apiKey: "####",
  authDomain: "#",
  databaseURL: "#",
  projectId: "#",
  storageBucket: "#",
  messagingSenderId: "#"
};
var fire = firebase.initializeApp(config);
export default fire;

App.js:

import fire from './fire';

class App extends Component {
    componentWillMount(){
        let messagesRef = fire.database().ref('messages').orderByKey().limitToLast(100);
    }
}

Но теперь я получаю это предупреждение вconsole:

Похоже, вы используете сборку разработки Firebase JS SDK.При развертывании приложений Firebase в рабочей среде рекомендуется импортировать только отдельные компоненты SDK, которые вы собираетесь использовать.

Для сборок модулей они доступны следующим образом (замените на имя компонента, т.е.аутентификация, база данных и т. д.):

Модули CommonJS: const firebase = require ('firebase / app');require ('firebase /');

ES Modules: импортировать firebase из 'firebase / app';import 'firebase /';

Как мне исправить это предупреждение?

Я пытался (в fire.js) изменить это:

import firebase from 'firebase'

Наэто:

import firebase from 'firebase/app'

Это приводит к этой ошибке:

Answer 1

Правильный способ импортировать FireBase таков:

import firebase from 'firebase/app';
import 'firebase/database'; // If using Firebase database
import 'firebase/storage';  // If using Firebase storage

Answer 2

Правильный способ импортировать Firebase и избавиться от предупреждений:

Всегда импортировать таким образом

import firebase from 'firebase/app';

Затем импортируйте каждый субмодуль (каждый сервис Firebase) по мере необходимости

import 'firebase/auth';        // for authentication
import 'firebase/storage';     // for storage
import 'firebase/database';    // for realtime database
import 'firebase/firestore';   // for cloud firestore
import 'firebase/messaging';   // for cloud messaging
import 'firebase/functions';   // for cloud functions

Answer 3

Предупреждение является довольно информативным и в точности излагает то, что вам нужно сделать.В вашем случае, это строка, которая говорит вам, чтобы вы поменяли способ импорта файлов:

ES Модули: импорт firebase из 'firebase / app';import 'firebase /';

В вашем файле fire.js попробуйте изменить это:

import firebase from 'firebase'

На это:

import firebase from 'firebase/app'

Это должно очистить еговверх!

Примечание:

В моем случае я использовал firestore, поэтому у меня был дополнительный импорт, который я также изменил с:

import firestore from 'firebase/firestore'

К:

import 'firebase/firestore'