gpt4 book ai didi

javascript - Reactjs 在删除未使用的 firebase 配置导入时呈现空白页面

转载 作者:行者123 更新时间:2023-12-02 21:54:37 34 4
gpt4 key购买 nike

我正在为我的 ReactJS Web 应用程序使用 Firebase。我的项目中有 FirebaseConfig.js 文件。我将此配置文件导入到其中一个组件中,以便使用 firebase 身份验证功能,并且一切正常。但后来,在进行一些重构时,我删除了与 Firebase 相关的代码,从而留下了 未使用的 FirebaseConfig 导入

需要注意的是,虽然未使用的导入仍然存在,但我保存了项目,一切都一样。现在问题出现了,如果我删除未使用的导入,在浏览器中保存并运行该项目,我会在控制台中看到一个空白页面,没有任何错误,并且在检查它显示为空的元素时 <div><body>标签。

尝试调试此问题并得出结论:这个特定的未使用的导入必须存在于浏览器呈现项目的任何组件中。

请分享您对这个非常奇怪的错误的看法。

(我正在使用 VS Code)

编辑:

(希望这些能让问题更清楚)

显示相关未使用导入的屏幕截图:

Screenshot showing the unused import in question

浏览器中显示的内容,并在控制台中发出警告,清楚地​​表明存在未使用的导入:

Result in browser with unused import

删除未使用的导入后浏览器中的结果。控制台中没有任何警告的空白页:

Result in browser without unused import

常用的 FirebaseConfig 文件

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

const firebaseConfig = {
apiKey: "AIzaSyCxMlMsmPAZNM_6g7gavsyYUf4GW1v7HsE",
authDomain: "physionext-d454f.firebaseapp.com",
databaseURL: "https://physionext-d454f.firebaseio.com",
projectId: "physionext-d454f",
storageBucket: "physionext-d454f.appspot.com",
messagingSenderId: "819439708505",
appId: "1:819439708505:web:fb68d9fb012fc0493d4448",
measurementId: "G-D2LM519RXX"
};

firebase.initializeApp(firebaseConfig);

export default firebase;

index.js

import firebase from 'firebase/app';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider,useSelector } from 'react-redux';
import { getFirebase, ReactReduxFirebaseProvider, isLoaded } from 'react-redux-firebase';
import { BrowserRouter as Router } from 'react-router-dom';
import { applyMiddleware, compose, createStore } from 'redux';
import { createFirestoreInstance, getFirestore, reduxFirestore } from 'redux-firestore';
import thunk from 'redux-thunk';
import App from './App';
import './index.css';
import * as serviceWorker from './serviceWorker';
import rootReducer from './store/reducers/rootReducer';

const store = createStore(
rootReducer,
compose(
applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore })),
reduxFirestore(firebase)
)
);

const rrfConfig = {
userProfile: 'users',
useFirestoreForProfile: true
};

const rrfProps = {
firebase,
config: rrfConfig,
dispatch: store.dispatch,
createFirestoreInstance
};

const app = (
<Provider store={store}>
<ReactReduxFirebaseProvider {...rrfProps}>
<Router>
<AuthIsLoaded>
<App />
</AuthIsLoaded>
</Router>
</ReactReduxFirebaseProvider>
</Provider>
);

function AuthIsLoaded({ children }) {
const auth = useSelector(state => state.firebase.auth)
console.log(auth)
if (!isLoaded(auth)) return <div></div>;
return children
}

ReactDOM.render(app, document.getElementById('root'));
serviceWorker.unregister();

最佳答案

在 Index.js 中替换:

  import firebase from 'firebase/app'; 

致:

import firebase from './FirebaseConfig'; 

关于javascript - Reactjs 在删除未使用的 firebase 配置导入时呈现空白页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60036080/

34 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com