我正在为我的 ReactJS Web 应用程序使用 Firebase。我的项目中有 FirebaseConfig.js 文件。 我将此配置文件导入到其中一个组件中，以便使用 firebase 身份验证功能，并且一切正常。 但后来，在进行一些重构时，我删除了与 Firebase 相关的代码，从而留下了 未使用的 FirebaseConfig 导入。
需要注意的是，虽然未使用的导入仍然存在，但我保存了项目，一切都一样。现在问题出现了，如果我删除未使用的导入，在浏览器中保存并运行该项目，我会在控制台中看到一个空白页面，没有任何错误，并且在检查它显示为空的元素时 <div>在 <body>标签。
尝试调试此问题并得出结论:这个特定的未使用的导入必须存在于浏览器呈现项目的任何组件中。
请分享您对这个非常奇怪的错误的看法。
(我正在使用 VS Code)
编辑:
(希望这些能让问题更清楚)
显示相关未使用导入的屏幕截图:
浏览器中显示的内容，并在控制台中发出警告，清楚地表明存在未使用的导入:
删除未使用的导入后浏览器中的结果。控制台中没有任何警告的空白页:
常用的 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/