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

问题描述

我正在为我的 ReactJS 网络应用程序使用 Firebase。我的项目中有FirebaseConfig.js文件。我在其中一个组件中导入了这个配置文件，以便使用 firebase auth 功能，一切正常。但后来，在进行一些重构时，我删除了与 Firebase 相关的代码，这些代码留下了一个未使用的 FirebaseConfig 导入。

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

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

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

（我正在使用 VS 代码）

编辑：

（希望这些能让问题更清楚）

显示有问题的未使用导入的屏幕截图：

浏览器中显示的内容以及控制台中的警告清楚地表明存在未使用的导入：

删除未使用的导入后出现在浏览器中。控制台中没有任何警告的空白页面：

常用的 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();

标签： javascriptreactjsfirebase

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

问题描述

解决方案

推荐阅读