Javascript 它看起来像你';在React应用程序中重新使用Firebase JS SDK的开发版本&;无效的API密钥

Javascript 它看起来像你';在React应用程序中重新使用Firebase JS SDK的开发版本&;无效的API密钥,javascript,reactjs,firebase,google-cloud-firestore,firebase-authentication,Javascript,Reactjs,Firebase,Google Cloud Firestore,Firebase Authentication,我创建了一个React应用程序,并在其上使用firestore。根据本文档,我已尝试将firebase身份验证集成到我的应用程序中,以授权登录: firebase.js: 从“firebase”导入firebase; 导入“firebase/firestore”; 导入“firebase/auth”; 常量firebaseConfig={ 阿皮奇:**, authDomain:**, 项目D:**, storageBucket:**, messagingSenderId:**, 附件:**, 措

我创建了一个React应用程序,并在其上使用firestore。根据本文档,我已尝试将firebase身份验证集成到我的应用程序中,以授权登录:

firebase.js:

从“firebase”导入firebase;
导入“firebase/firestore”;
导入“firebase/auth”;
常量firebaseConfig={
阿皮奇:**,
authDomain:**,
项目D:**,
storageBucket:**,
messagingSenderId:**,
附件:**,
措施:**,
};
firebase.initializeApp(firebaseConfig);
export const db=firebase.firestore();
我有一个名为AuthContext.js的上下文文件:

import React,{useState,useffect,createContext}来自“React”;
从“/firestore”导入{authentication};
export const AuthContext=createContext();
导出常量AuthProvider=({children})=>{
const[currentUser,setCurrentUser]=useState(null);
useffect(()=>{
身份验证。onAuthStateChanged((用户)=>{
setCurrentUser(用户);
});
}, []);
返回(
{儿童}
);
};
这是App.js

从“react Router dom”导入{BrowserRouter as Router,Route,Switch};
从“/pages/Routes/Nav”导入导航;
从“/pages/Routes/Footer”导入页脚;
从“/pages/Home”导入主页;
从“/pages/Search”导入搜索;
从“/pages/Detail”导入详细信息;
从“/pages/User”导入用户;
从“/pages/LoginSignup”导入LoginSignup;
从“/utility/AuthContext”导入{AuthProvider}”;
函数App(){
返回(
);
}
导出默认应用程序;
通过此配置,我得到了以下错误:

"It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.

For the module builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):

CommonJS Modules:
const firebase = require('firebase/app');
require('firebase/<PACKAGE>');

ES Modules:
import firebase from 'firebase/app';
import 'firebase/<PACKAGE>';

Typescript:
import firebase from 'firebase/app';
import 'firebase/<PACKAGE>';"
我曾研究过谷歌和Stackoverflow,但无法解决它。我绝对相信API密钥是正确的。我反复检查了一遍。我想我错过了什么

这是错误的屏幕截图:


在这些行中,我遗漏了什么?

交换
从“firebase”导入firebase。使用
从“firebase/app”导入firebase以消除开发构建警告。确保删除原始行,否则错误不会消失

要修复ID,请尝试转到
https://console.firebase.google.com/u/0/project/[您的项目ID]/settings/general/


在那里,您应该有一个正确预填充的firebase配置,您可以复制粘贴。

要解决第一个问题,请使用
从“firebase/app”导入firebase,如果您需要,也会在许多搜索结果中显示。我建议先解决这个问题,然后从问题中删除它,这样人们就可以关注第二个问题。
import firebase from "firebase/app"