GatsbyJS with Firebase - WebpackError: ReferenceError: IDBIndex is not defined

Question

我收到了 gatsby develop 错误。它与这个非常相似：https://github.com/firebase/firebase-js-sdk/issues/2222，但我收到了 gatsby develop 错误，而不是 gatsby build。我做了很多研究，但找不到有效的解决方案。 一开始我遇到了 gatsby build 的问题，就像在这篇文章中：https://github.com/firebase/firebase-js-sdk/issues/2222，但我用自定义的 onCreateWebpackConfig 解决了它（你可以在下面找到它）。

堆栈： - 盖茨比 - Firebase（可能有错误） - 还原

我也删除了 .cache 和 node_modules 并重新安装了所有东西，但是没有用。

错误：

There was an error compiling the html.js component for the development server.

See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html ReferenceError: IDBIndex is not defined
]);
  86 | 
> 87 | proxyRequestMethods(Index, '_index', IDBIndex, [
     | ^
  88 |   'get',
  89 |   'getKey',
  90 |   'getAll',

  WebpackError: ReferenceError: IDBIndex is not defined

  - idb.mjs:87 Module../node_modules/idb/lib/idb.mjs
    node_modules/idb/lib/idb.mjs:87:1

  - index.esm.js:1 Module../node_modules/@firebase/installations/dist/index.esm.js
    node_modules/@firebase/installations/dist/index.esm.js:1:1

  - index.esm.js:1 Module../node_modules/@firebase/analytics/dist/index.esm.js
    node_modules/@firebase/analytics/dist/index.esm.js:1:1

  - index.esm.js:1 Module../node_modules/firebase/analytics/dist/index.esm.js
    node_modules/firebase/analytics/dist/index.esm.js:1:1

  - index.ts:1 Module../src/firebase/index.ts
    src/firebase/index.ts:1:1

  - index.esm.js:32 emit
    node_modules/@firebase/analytics/dist/index.esm.js:32:1

我的 gatsby-node 文件：

exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
  if (stage === 'build-html') {
    actions.setWebpackConfig({
      externals: getConfig().externals.concat(function(context, request, callback) {
        const regex = /^@?firebase(\/(.+))?/;
        if (regex.test(request)) {
          return callback(null, `umd ${request}`);
        }
        callback();
      }),
    });
  }
};

我的 firebase 依赖项：

 "@firebase/firestore-types": "^1.10.1",
 "firebase": "^7.13.1",
 "firebase-admin": "^8.10.0",
 "firebase-functions": "^3.5.0",
 "firebase-tools": "^7.16.1",

Firebase 索引文件：

import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';
import 'firebase/storage';
import 'firebase/analytics';
const firebaseConfig = {...};
firebase.initializeApp(firebaseConfig);
export const firestore = firebase.firestore();
export const auth = firebase.auth();
export const storage = firebase.storage();

项目回购：https://github.com/olafsulich/Projecty

在 Github 问题上发帖：https://github.com/firebase/firebase-js-sdk/issues/2946

提前致谢。

Answer 1

由于您的条件 (stage === 'build-html')，以下 sn-p 仅适用于 build 环境：

   exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
      if (stage === 'build-html') {
        actions.setWebpackConfig({
          externals: getConfig().externals.concat(function(context, request, callback) {
            const regex = /^@?firebase(\/(.+))?/;
            if (regex.test(request)) {
              return callback(null, `umd ${request}`);
            }
            callback();
          }),
        });
      }
    };

删除它并像这样使用它：

   exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
        actions.setWebpackConfig({
          externals: getConfig().externals.concat(function(context, request, callback) {
            const regex = /^@?firebase(\/(.+))?/;
            if (regex.test(request)) {
              return callback(null, `umd ${request}`);
            }
            callback();
          }),
        });
    };

---

非常感谢！它只适用于 gatbsy 开发，但现在当我 想要构建项目，我收到一个错误 - TypeError：无法读取 未定义的属性“连接”。你知道怎么解决吗？

关于新问题，您可以遵循this topic 中的解决方法，这是 Gatsby 中第三方模块尝试访问尚未定义的 DOM 元素（通常为window）时的常见错误应用程序构建。所以，你需要等到window 被定义。您可以通过两种方式实现这一目标：

1. 用这样的条件实例化你的火力基地：

    import firebase from '@firebase/app';
    import '@firebase/auth';
    import '@firebase/firestore';
    import '@firebase/functions';
   
    const config = {
       ... firebase config here
    };
   
    let instance;
   
    export default function getFirebase() {
      if (typeof window !== 'undefined') {
        if (instance) return instance;
        instance = firebase.initializeApp(config);
        return instance;
      }
   
      return null;
    }
   

   注意if (typeof window !== 'undefined') 声明

2. 通过忽略 webpack 配置中的 firebase 模块，例如显示 their docs。在你的gatsby-node.js:

    exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
      if (stage === "build-html") {
        actions.setWebpackConfig({
          module: {
            rules: [
              {
                test: /bad-module/,
                use: loaders.null(),
              },
            ],
          },
        })
      }
    }
   

   将 bad module 替换为 firebase（或 node_modules 中的包/文件夹名称）。留下斜线，因为test 是正则表达式规则

   这个 sn-p 替换了您之前的一个似乎在concat() 函数中引发错误的sn-p。

---

对于那些想尝试concat() 分辨率的人来说，这也会有所帮助：

exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
  if (stage === 'build-html') {
    actions.setWebpackConfig({
      externals: getConfig().externals.concat((context, request, callback) => {
        const regex = /^@?firebase(\/(.+))?/
        // exclude firebase products from being bundled, so they will be loaded using require() at runtime.
        if (regex.test(request)) {
          return callback(null, `commonjs ${request}`) // <- use commonjs!
        }
        callback()
      }),
    })
  }
}

Answer 2

解决了这个问题！！
我正在使用“gatsby”：“^3.10.2”、“firebase”：“9.0.0-beta.6”。

firebase 需要将 externals 设置为 commonjs。

gatsby-node.js:

exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
  if (stage === 'build-html') {
    actions.setWebpackConfig({
      externals: getConfig().externals.concat((context, request, callback) => {
        const regex = /^@?firebase(\/(.+))?/
        // exclude firebase products from being bundled, so they will be loaded using require() at runtime.
        if (regex.test(request)) {
          return callback(null, `commonjs ${request}`) // <- use commonjs!
        }
        callback()
      }),
    })
  }
}

请试试这个设置。