Gatsby: WebpackError: ReferenceError: IDBIndex is not defined

[AlbertZawadzki]

Description

I know it's quite common issue, but really I've no idea how to fix/obey this gatsby (or firebase) error.
Receiving build error:
WebpackError: ReferenceError: IDBIndex is not defined

Steps to reproduce

Make GatsbyJS, ReactJS and Firebase app
Connect your Firebase
Fetch data
Try to build the app

Expected result

I want to build app

Actual result

Build error

Environment

System:
OS: Windows 10
CPU: (8) x64 Intel(R) Core(TM) i7-4700MQ CPU @ 2.40GHz
Binaries:
Yarn: 1.17.3 - C:UsersAlbertAppDataRoamingnpmyarn.CMD
npm: 6.9.2 - C:Program Filesnodejsnpm.CMD
Languages:
Python: 2.7.16
Browsers:
Edge: 42.17134.1.0
npmPackages:
gatsby: ^2.15.15 => 2.15.15
gatsby-image: ^2.2.19 => 2.2.19
gatsby-plugin-manifest: ^2.2.16 => 2.2.16
gatsby-plugin-offline: ^2.2.10 => 2.2.10
gatsby-plugin-prefetch-google-fonts: ^1.4.3 => 1.4.3
gatsby-plugin-react-helmet: ^3.1.7 => 3.1.7
gatsby-plugin-sharp: ^2.2.22 => 2.2.22
gatsby-source-filesystem: ^2.1.22 => 2.1.22
gatsby-source-firebase: ^1.0.0 => 1.0.0
gatsby-source-firestore: ^1.0.3 => 1.0.3
gatsby-transformer-json: ^2.2.8 => 2.2.8
gatsby-transformer-sharp: ^2.2.14 => 2.2.14

[jonniebigodes]

@AlbertZawadzki can you create a small reproduction following these steps ? But at first glance it seems that it might be related to one of the firebase/firestore packages probably. But i can't say for sure it's checked out in more detail.

[AlbertZawadzki]

Thanks for response
You might unfortunately right that its fire problem, but I hope someone had such issue and could solve it.
repo:
https://github.com/AlbertZawadzki/gatsby-firebase

[lauirvin]

@AlbertoAbruzzo I had the same issue and solved it by deleting the .cache, public and the node_modules folder then npm install again.

If you're using auth() in your application and got a TypeError: Cannot read property 'split' of null when building error after fixing IDBIndex is not defined, the following code will fix it:-

```let firebaseAppAuth
if (typeof window !== "undefined") {
firebaseAppAuth = firebaseApp.auth()
}

[AlbertZawadzki]

Ok nailed it
issue - you can't fetch data using gatsby and firebase in src folder
fix - use gatsby-node to fetch data and than send it to each component (works even smarter)

[devboldly]

To anyone else who's trying to use Firebase on a Gatsby site:

The workaround requires excluding browser dependencies by making them "externals" in the Gatsby webpack config.

This similar thread got me close to solving this, but I came up with the following solution, which takes into account react-firebase* dependencies in addition to just firebase*.

Add the following to gatsby-node.js:

exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => {
  if (stage === 'build-html') {
    actions.setWebpackConfig({
      // Don't bundle modules that reference browser globals such as `window` and `IDBIndex` during SSR.
      // See: https://github.com/gatsbyjs/gatsby/issues/17725
      externals: getConfig().externals.concat(function(_context, request, callback) {
        // Exclude bundling firebase* and react-firebase*
        // These are instead required at runtime.
        if (/^@?(react-)?firebase(.*)/.test(request)) {
          console.log('Excluding bundling of: ' + request);
          return callback(null, 'umd ' + request);
        }
        callback();
      }),
    });
  }
};

This will exclude dependencies such as:

• firebase
• react-firebaseui
• react-firebase-hooks

And it will print to the console the dependencies that are excluded so you can see what's going on.

You can modify the regex if you'd like, or daisy chain another .concat(...) to the end to exclude other dependencies.

Why It Breaks

Firebase uses some globals (in this case, IDBIndex) that are only available at runtime in the browser, and not during server-side rendering, causing gatsby build to blow up, showing the following ReferenceError:

WebpackError: ReferenceError: IDBIndex is not defined

This is because firebase tries to use IDBIndex which is only available in the browser and not during a Gatsby build.

Only excluding firebase and keeping react-firebase* projects resulted in the following:

ReferenceError: window is not defined

In my case, the offending project was react-firebaseui, which references window which is also unavailable during SSR.

Discussion for this in the firebase-js-sdk project is locked for whatever reason, so I'm posting the solution that worked for me here in case anyone else is stuck like I was.

Hope it helps!

[rubenberna]

Many thanks @devboldly ! Solved ;)

[gndx]

Thanks @devboldly