web-dev-qa-db-ja.com

警告：Firebase JS SDKの開発ビルドを使用しているようです

FirebaseをReact.jsアプリに次のように統合しました： https://firebase.google.com/docs/database/web/start

import firebase from 'firebase'

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

import fire from './fire';

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

しかし、今私はこの警告をコンソールに表示しています：

Firebase JS SDKの開発ビルドを使用しているようです。 Firebaseアプリを実稼働環境に展開する場合、使用する個々のSDKコンポーネントのみをインポートすることをお勧めします。

モジュールビルドの場合、これらは次の方法で利用できます（コンポーネントの名前-auth、データベースなどに置き換えてください）：

CommonJSモジュール：const firebase = require（ 'firebase/app'）; require（ 'firebase /'）;

ESモジュール：「firebase/app」からfirebaseをインポートします。 import 'firebase /';

この警告を修正するにはどうすればよいですか？

私は（fire.jsで）これを変更しようとしました：

import firebase from 'firebase'

これに：

import firebase from 'firebase/app'

その結果、このエラーが発生します。 enter image description here

reactjsfirebase
21
etayluz

Firebaseをインポートする適切な方法は次のとおりです。

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

この警告はかなり有益であり、あなたが何をする必要があるかを正確に示しています。あなたの場合、これはファイルのインポート方法を切り替えるように指示する行です：

ESモジュール：「firebase/app」からfirebaseをインポートします。 import 'firebase /';

fire.jsファイルで、これを変更してみてください：

import firebase from 'firebase'

これに：

import firebase from 'firebase/app'

これで解決するはずです！

サイドノート：

私の場合、firestoreを使用していたため、追加のインポートがありましたが、これも変更しました：

import firestore from 'firebase/firestore'

に：

import 'firebase/firestore'
10
Nick Perez Rivera

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
8
Yash Chavda