Gatsby JS с Firebase - WebpackError: ReferenceError: IDBIndex не определен - PullRequest
1 голос
/ 21 апреля 2020

Я получил ошибку с gatsby development . Это очень похоже на это: https://github.com/firebase/firebase-js-sdk/issues/2222, но я получил ошибку с gatsby development , а не с gatsby build. Я провел много исследований, но не могу найти рабочее решение. Сначала у меня была проблема с gatsby build , как в этом посте: https://github.com/firebase/firebase-js-sdk/issues/2222, но я решил ее с помощью пользовательского onCreateWebpackConfig (вы можете найти его ниже).

Stack: - Gatsby - 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

Файл моего узла Гэтсби :

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

Заранее спасибо.

1 Ответ

0 голосов
/ 21 апреля 2020

Следующий фрагмент будет работать только в среде 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 из undefined. Вы знаете, как ее решить?

Что касается новой проблемы, вы можете выполнить обходной путь в this topi c, Это распространенная ошибка в сторонних модулях в Гэтсби, когда они пытаются достичь элемента 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) Игнорируя модуль firebase в конфигурации вашего веб-пакета, вы увидите, как их документы . В вашем 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 (или имя пакета)

Этот фрагмент заменяет ваш предыдущий, который, кажется, выбрасывает ошибка в функции concat().

...