警告：您似乎在使用 Firebase JS SDK 的开发版本

IT技术 reactjs firebase
2021-04-19 03:26:31

我已经将 Firebase 集成到我的 React.js 应用程序中：https ://firebase.google.com/docs/database/web/start

火.js： 
import firebase from 'firebase'

var config = {
  apiKey: "####",
  authDomain: "#",
  databaseURL: "#",
  projectId: "#",
  storageBucket: "#",
  messagingSenderId: "#"
};
var fire = firebase.initializeApp(config);
export default fire;
应用程序.js： 
import fire from './fire';

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

但是现在我在控制台中收到此警告：

看起来您正在使用 Firebase JS SDK 的开发版本。将 Firebase 应用部署到生产环境时，建议仅导入您打算使用的各个 SDK 组件。

对于module构建，这些可以通过以下方式使用（替换为组件的名称 - 即身份验证、数据库等）：

CommonJS module：const firebase = require('firebase/app'); 要求（'火力基地/'）；

ES module：从“firebase/app”导入 firebase；导入'firebase/';

我该如何解决这个警告？

我试过（在 fire.js 中）改变这个：

import firebase from 'firebase'

对此：

import firebase from 'firebase/app'

这导致此错误： 在此处输入图片说明

5个回答

导入 firebase 的正确方法是这样的：

import firebase from 'firebase/app';
import 'firebase/database'; // If using Firebase database
import 'firebase/storage';  // If using Firebase storage
当我将导入更改为此时警告应该消失吗？我已经更改了它，但仍然收到警告。
2021-05-30 03:26:31
@vhflat 在我修复了所有项目文件中的导入语句后，警告消失了。
2021-06-12 03:26:31

导入 firebase 并消除警告的正确方法是：

始终以这种方式导入

import firebase from 'firebase/app';

然后根据需要导入每个子module（每个 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
你的答案与已经接受的答案有什么不同？
2021-05-25 03:26:31
@toti08 它为 firebase 的其他子module添加了导入路径，这对于人们在使用其他 firebase 服务时遇到同样的错误很有用。
2021-05-27 03:26:31
多么棒的答案！
2021-06-02 03:26:31
initializeApp 怎么样？
2021-06-10 03:26:31
我一直在使用的应用程序也收到了这种不断的警告。某处是否有所有子module的列表，以便我可以包含所有子module？我只是想摆脱愚蠢的警告。
2021-06-18 03:26:31

该警告提供了相当丰富的信息，并准确列出了您需要执行的操作。在您的情况下，这是告诉您切换导入文件的方式的行：

ES module：从“firebase/app”导入 firebase；导入'firebase/';

在你的fire.js文件中尝试改变这个：

import firebase from 'firebase'

对此：

import firebase from 'firebase/app'

那应该清除它！

边注：

在我的情况下，我正在使用，firestore所以我有一个额外的导入，我也从：

import firestore from 'firebase/firestore'

到：

import 'firebase/firestore'
我已经尝试过这个，但它导致了上面的错误（请参阅带有附加图像的修改后的问题）。有任何想法吗？
2021-05-31 03:26:31
查看我对我的问题的回答
2021-05-31 03:26:31
我找到了解决方案
2021-06-03 03:26:31
最后，导入的语法是什么？
2021-06-15 03:26:31

需要注意的一点：

我仅将 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';
其它你可能感兴趣的问题
上一篇如果我在 ReactJS 或 React Native 的类的构造函数中使用 setState() 函数会发生什么？ 下一篇react onClick 和 preventDefault() 链接刷新/重定向？