从保留网址加载 Firebase SDK 时无法初始化

Question

我正在尝试在我的 create-react-app 中使用 firebase 的保留 URL，并按照 firebase 站点中提供的说明进行操作。我包含了 SDK（应用程序、firestore、分析），然后在包含 SDK 之后添加了 <script src="/__/firebase/init.js"></script> 条目以初始化 SDK。我的 index.html（未构建）正文标签如下所示：

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->

    <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
    <script src="/__/firebase/7.22.1/firebase-app.js"></script>

    <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
    <script src="/__/firebase/7.22.1/firebase-analytics.js"></script>

    <!-- Add Firebase products that you want to use -->
    <script src="/__/firebase/7.22.1/firebase-auth.js"></script>
    <script src="/__/firebase/7.22.1/firebase-firestore.js"></script>
    <!-- Load the Firebase SDKs before loading this file -->
    <script src="/__/firebase/init.js"></script>

    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>

我的 firebase.js 页面如下所示：

    import firebase from "firebase/app";
    import "firebase/auth";
    import "firebase/firestore";
    import { createFirestoreInstance } from "redux-firestore";
    
    const getRrfProps = (reduxStore) => {
      // initialize firebase and firestore
      console.log("inside firebase.js");
      // eslint-disable-next-line global-require
      try {
        if (!firebase.apps.length) {
          /*  console.log(
            "inside dev env apps.length if block, apikey: ",
            process.env.REACT_APP_FIREBASE_APIKEY
          ); */
          if (process.env.NODE_ENV === "development") {
            const firebaseConfig = {
              apiKey: process.env.REACT_APP_FIREBASE_APIKEY,
              authDomain: process.env.REACT_APP_FIREBASE_AUTHDOMAIN,
              databaseURL: process.env.REACT_APP_FIREBASE_DATABASEURL,
              projectId: process.env.REACT_APP_FIREBASE_PROJECTID,
              storageBucket: process.env.REACT_APP_FIREBASE_STORAGEBUCKET,
              messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGINGSENDERID,
              appId: process.env.REACT_APP_FIREBASE_APPID,
              measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENTID,
            };
            firebase.initializeApp(firebaseConfig);
          } else throw new Error("Firebase Config Error ");
        }
      } catch (error) {
        console.error(
          "[FIREBASE] Firebase not configured or initialized : ",
          error
        );
        return undefined;
      }
    
      firebase
        .firestore()
        .enablePersistence()
        .catch((err) => {
          if (err.code === "failed-precondition") {
            console.error(
              "[FIREBASE PERSISTENCE (CACHE)] - Multiple tabs open, persistence can only be enabled in one tab at a a time."
            );
          } else if (err.code === "unimplemented") {
            console.error(
              "[FIREBASE PERSISTENCE (CACHE)] - The current browser does not support all of the features required to enable persistence"
            );
          }
        });
...
... other codes ...
...
..

我知道再次导入 firebase 库是多余的，但我的开发环境需要它。在生产环境中，SDK 似乎正在注入，因为在我的开发环境中抛出了两次加载 firebase 的警告。但是 firebase 的初始化并没有发生，因为它会转到 throw 语句并生成异常。有什么解决办法吗？

Answer 1

问题出在 firebase.json 文件中，该文件是托管配置文件。我删除了这两个方面并开始工作：

"rewrites": [ {
    "source": "**",
    "destination": "/index.html"
  } ]

&

"headers": [
      {
        "source": "/service-worker.js",
        "headers": [{ "key": "Cache-Control", "value": "no-cache" }]
      }
    ],

从保留网址加载 Firebase SDK 时无法初始化

Unable to initialize when loading Firebase SDKs from reserved URLs

javascript

firebase

reactjs

create-react-app

google-cloud-firestore