从保留 URL 加载 Firebase SDK 时无法初始化答案

【问题标题】：Unable to initialize when loading Firebase SDKs from reserved URLs从保留 URL 加载 Firebase SDK 时无法初始化
【发布时间】：2020-10-19 15:40:52
【问题描述】：

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

<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 语句并生成异常。任何想法如何解决这个问题？

【问题讨论】：

您不应将脚本包含与来自模块捆绑器的导入混合。 documentation 清楚地表明您必须选择其中一个 - 它们具有不同的集成路径。如果您使用的是带有导入的捆绑器，则根本不要使用包含的脚本。
我已经提到了为什么我同时使用了这两种方法。模块包用于开发环境，脚本用于生产。您是否认为这是问题的根本原因？
是的，我只能想象这会导致问题。

标签： javascript reactjs firebase google-cloud-firestore create-react-app

【解决方案1】：

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

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

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

【讨论】：