Question

我在 gatsby开发上收到错误消息。与此非常相似：https://github.com/firebase/firebase-js-sdk/issues/2222，但是 gatsby开发（而不是gatsby构建）收到错误消息。我做了很多研究，但是找不到有效的解决方案。最初，我在 gatsby构建上遇到了问题，就像这篇文章：https://github.com/firebase/firebase-js-sdk/issues/2222一样，但是我通过自定义onCreateWebpackConfig（可以在下面找到）解决了这个问题。

堆栈： -盖茨比 - Firebase（可能与此有关的错误） -Redux

我还要删除.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节点文件：

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

以下代码段由于您的状况（build）仅在stage === 'build-html'环境下有效：

   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：无法读取未定义的属性“ concat”。你知道如何解决吗？

关于新问题，您可以按照this topic中的解决方法进行操作，这是Gatsby中第三方模块尝试访问的DOM元素（通常为window）时的常见错误。应用程式建立时尚未定义。因此，您需要等待直到定义了window。您可以通过两种方式实现这一目标：

1）使用以下条件增强您的Firebase：

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(),
          },
        ],
      },
    })
  }
}

替换Firebase（或程序包名称）的“错误模块”

此代码段替换了您先前的似乎在concat()函数中引发错误的代码段。

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(function(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();
      })
    });
  }
};

请尝试此设置。

带有Firebase的GatsbyJS-WebpackError：ReferenceError：未定义IDBIndex

2 个答案: