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

[olafsulich]

[REQUIRED] Describe your environment

• Operating System version: MacOS 10.14.6
• Browser version: Chrome Version 77.0.3865.90 (Official Build) (64-bit)
• Firebase SDK version: 7.13.1
• Firebase Product: (auth, firestore, storage, functions,hosting)

[REQUIRED] Describe the problem

Steps to reproduce:

Gatsby.js cannot build the final app.js file due to issue in any of the firebase packages.
I have read this issue: #2222, but it don't work in my case, maybe I'm doing something wrong...
I have exacly the same issue as in the above post.

Relevant Code:

Error in the console:

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-config:

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

firebase index file

imports....

firebase.initializeApp(firebaseConfig);
export const firestore = firebase.firestore();
export const auth = firebase.auth();
export const storage = firebase.storage();

Project repo: https://github.com/olafsulich/Projecty

Thanks in advance.

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[hsubox76]

I notice your regex will not match @firebase/analytics or any dependency beginning with @firebase. This is probably the issue. That is the dependency it needs to act on.

[olafsulich]

Thank's for such a quick reply. Do you mean that one:
(/^(react-)?firebase(.*)/.test(request)? Do you know how to match my firebase dependencies to that?

[olafsulich]

The related error with build has been resolved, but I'm received error with gatsby develop.
Error:

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

I change onCreateWebpackConfig in gatsby node, and now it's looks like that:

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

My firebase dependencies:

 "@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",

And this is my main firebase index file in src/firebase/index:

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

I'm also delete .cache and node_modules and install everything again, but it didn't work.

[hsubox76]

Unfortunately I'm not an expert with Gatsby and all of its build paths. Do you think that you can post a question on Stack Overflow or another forum with Gatsby experts about how to apply the same solution to gatsby develop that seems to be working for gatsby build? Feel free to refer them to my comment in #2222 about what the root problem is and what Gatsby needs to be configured to look for.

[olafsulich]

Of course, thank you very much for your time