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

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

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

标记中显示为空的

尝试调试此问题，并得出结论，浏览器渲染项目时，任何组件中都必须存在此未使用的导入

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

（我正在使用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();

从“firebase/app”导入firebase；
从“React”导入React；
从“react dom”导入react dom；
从“react redux”导入{Provider，useSelector}；
从“react-redux firebase”导入{getFirebase，ReactRedux FirebaseProvider，isLoaded}；
从“react Router dom”导入{BrowserRouter as Router}；
从“redux”导入{applyMiddleware，compose，createStore}；
从“redux firestore”导入{createFirestoreInstance，getFirestore，reduxFirestore}；
从“redux thunk”导入thunk；
从“./App”导入应用程序；
导入“./index.css”；
将*作为serviceWorker从“/serviceWorker”导入；
从“./store/reducers/rootReducer”导入rootReducer；
const store=createStore(
减根剂，
谱写(
applyMiddleware（thunk.withExtraArgument（{getFirebase，getFirestore}）），
reduxFirestore（firebase）
)
);
常数rrfConfig={
userProfile:'用户'，
useFirestoreForProfile:true
};
常数rrfProps={
火基，
配置：rrfConfig，
调度：store.dispatch，
createFirestoreInstance
};
常量应用=(
);
函数authisload（{children}）{
const auth=useSelector（state=>state.firebase.auth）
console.log（auth）
如果（！isLoaded（auth））返回；
返回儿童
}
render（app，document.getElementById（'root'）；
serviceWorker.unregister（）；

在Index.js中替换：

  import firebase from 'firebase/app'; 

致：

---

为了更好地理解，您必须添加代码。如果有沙盒示例，那就太好了。这个问题可能是愚蠢的。你在其他地方使用firebase吗？如果非要我猜的话，问题是你在firebase被初始化之前尝试访问它。这个“未使用”的导入解决了切换到react-redux firebase可能是个好主意的问题。@ErnestasButa我实际上使用的是react-redux firebase。firebase目前唯一使用的另一个文件是index.js文件，您的评论让我怀疑问题的原因可能在那里。我现在正在用index.js文件更新这个问题。在index中你永远不会初始化firebase。查看react redux firebase的入门页面这是一个非常愚蠢的错误。甚至在你最后一次评论后，我自己也发现了这一点

import firebase from './FirebaseConfig';