경고:Firebase JS SDK의 개발 빌드를 사용하고 있는 것 같습니다.

경고:Firebase JS SDK의 개발 빌드를 사용하고 있는 것 같습니다.

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);
    }
}

그러나 콘솔에 다음과 같은 경고가 표시됩니다.

Firebase JS SDK의 개발 빌드를 사용하고 있는 것 같습니다.Firebase 앱을 실제 가동 환경에 도입할 때는 사용하려는 개별 SDK 컴포넌트만 Import하는 것이 좋습니다.

모듈 빌드의 경우 다음과 같은 방법으로 사용할 수 있습니다(컴포넌트 이름(auth, 데이터베이스 등)으로 대체).

CommonJS 모듈: const firebase = require "firebase/app"; require "firebase/";

ES 모듈: 'firebase/app'에서 파이어베이스 가져오기, 'firebase/' 가져오기;

이 경고는 어떻게 수정합니까?

(in fire.js) 이 변경을 시도했습니다.

import firebase from 'firebase'

이를 위해:

import firebase from 'firebase/app'

그 결과, 다음의 에러가 발생합니다.

파이어베이스를 Import 하는 적절한 방법은 다음과 같습니다.

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

파이어베이스를 Import하여 경고를 삭제하는 적절한 방법은 다음과 같습니다.

항상 이 방법으로 가져오기

import firebase from 'firebase/app';

그런 다음 필요에 따라 각 하위 모듈(각 방화벽 기반 서비스)을 가져옵니다.

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

이 경고는 상당히 유익하고 해야 할 일을 정확하게 설명합니다.이 경우 파일 Import 방법을 전환하도록 지시하는 행은 다음과 같습니다.

ES 모듈: 'firebase/app'에서 파이어베이스 가져오기, 'firebase/' 가져오기;

고객님의 고객명fire.js파일 변경 시도:

import firebase from 'firebase'

이를 위해:

import firebase from 'firebase/app'

그럼 해결되겠지!

사이드 노트:

저 같은 경우에는firestore그래서 추가로 Import를 했는데, 이것도 다음에서 변경했습니다.

import firestore from 'firebase/firestore'

수신인:

import 'firebase/firestore'

주의사항:

파이어베이스를 스토리지에만 사용하고 있습니다만, 다음의 작업이 필요했습니다.

import firebase from "firebase/app"
import "firebase/storage"
import "firebase/auth"

OP에서 웹 팩 오류가 발생하지 않도록 합니다.

스토리지에 액세스하기 전에 사용자를 인증하고 있었습니다.메인 인증 프로바이더로서 파이어베이스를 사용하고 있지 않습니다.

나도 마찬가지야.이렇게 풀었어요.

import firebase from "firebase/app"

파이어베이스를 수입하는 모든 곳에서 프로젝트를 위해 사용했습니다.이건 나한테 효과가 있었어.

물론 Firebase 초기화 시 필요한 서비스를 사용해야 합니다.

import 'firebase/auth';    
import 'firebase/storage';    
import 'firebase/database';   
import 'firebase/firestore';  
import 'firebase/messaging';  
import 'firebase/functions';   

import firebase from "firebase";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
};

const app = firebase.initializeApp(firebaseConfig);
const auth = app.auth();
const db = app.firestore();





----------------------------------

    import firebase from "firebase/app";
    import 'firebase/firestore';
    import 'firebase/auth';
    
    const firebaseConfig = {
      apiKey: process.env.REACT_APP_FIREBASE_KEY,
      authDomain: process.env.REACT_APP_FIREBASE_DOMAIN,
      databaseURL: process.env.REACT_APP_FIREBASE_DATABASE,
      projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
      storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
      messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID,
      appId: process.env.REACT_APP_FIREBASE_APP_ID,
      measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
    };
    
    const app = firebase.initializeApp(firebaseConfig);
    const auth = app.auth();
    const db = app.firestore();

"/app+/< package >"를 시도하면 동작하고, 그 이상의 코드가 표시됩니다.마지막으로, 위에서 고마워.

언급URL : https://stackoverflow.com/questions/50707211/warning-it-looks-like-youre-using-the-development-build-of-the-firebase-js-sdk