我已经将Firebase集成到我的React中.js应用程序本身:

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的开发版本

对于模块构建,可以通过以下方式获得

CommonJS模块:const firebase=require('firebase/app');

ES模块:从"firebase/app"导入firebase;

如何修复此警告?

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

import firebase from 'firebase'

为此:

import firebase from 'firebase/app'

这导致了这个错误:

推荐答案

导入firebase的正确方法如下:

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

Reactjs相关问答推荐

在一个地方调用函数会影响其他地方调用该函数

如何防止使用useCallback和memo重新渲染

Reaction Native:在初始获取后,Reducer变为未定义

为什么我的标签在Redux API中不能正常工作?

useTranslation不会在languageChanged上重新呈现组件

如何使我的代码可以接受我想要的每一个链接

在每页上应用字体-NextJS

onClick 事件处理程序未应用于样式组件

Javascript - 正则表达式不适用于 MAC OS - 编码?

当从子状态更改复制时,react 父状态更改.我该如何防止这种情况?

如何更新 FunctionComponentElement 的 props

标签文本删除了 MUI 概述的输入

useRef 不关注模态

useMemo 依赖项的行为

React - 将一个充满空值的无限大小的数组存储在 ref 中是否可以,或者我应该重置数组吗?

React:如何使用条件渲染和react 挂钩来更新另一个组件的状态?

FlatList 不在 React Native 中呈现项目

使用 React Router v6 监听来自不同组件的组件状态变化

如何使图标适合 react-bootstrap 中的行元素

bootstrap 导航栏切换器在 reactjs 中不起作用