警告: 看起来您正在使用 FirebaseJSSDK 的开发构建

我已经将 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 的开发版本 在将 Firebase 应用程序部署到生产环境时，建议使用 只导入要使用的各个 SDK 组件。

对于模块构建，可以通过以下方式获得这些内容 (替换为组件的名称-即 auth、 database、, 等) :

CommonJS 模块: const firebase = demand (‘ firebase/app’) ; 要求(「火源/」) ;

ES 模块: 从“ firebase/app”导入 firebase; 进口「火库/」 ;

我如何修复这个警告？

我试过(在 fire.js 中)改变这一点:

import firebase from 'firebase'

这样说:

import firebase from 'firebase/app'

这就导致了这个错误: enter image description here

43415 次浏览
小开

这个警告信息量很大，并且准确地列出了您需要做的事情。对于您的情况，这行代码告诉您切换导入文件的方式:

ES 模块: 从“ firebase/app”进口 firebase; 从“ firebase/”进口 firebase;

在 fire.js文件中尝试更改以下内容:

import firebase from 'firebase'

这样说:

import firebase from 'firebase/app'

这样就清楚了！

边注:

在我的例子中，我使用的是 firestore，所以我有一个额外的导入，我也改变了:

import firestore from 'firebase/firestore'

致:

import 'firebase/firestore'
小开
最佳答案

进口防火材料的正确方法是:

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

进口防火材料和消除警告的正确方法是:

总是以这种方式进口

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
小开

值得注意的是:

我只是把 Firebase 用于存储，但我仍然需要:

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

以避免在 OP 中出现 webpack 错误。

我在进入仓库之前就已经验证了用户的身份。虽然我没有使用 firebase 作为我的主要认证提供商。

小开

对我来说也一样。我用这种方法解决了它。

import firebase from "firebase/app"

在我的项目中，我在每个导入 Firebase 的地方都使用了它。

当然，请记住使用 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 >”，它工作了，我显示了比上面更多的代码。


提交答案