Gatsby 3 – `gatsby build` fails on 'Building static HTML for pages' with error 'WebpackError: ReferenceError: ... is not defined' (firebase/app)

Question

When running gatsby build, the process fails on Gatsby v3.

A bit of context... The firebase modules are being included in a custom hook (code showing this is below).

There is a custom webpack config function in gatsby-node that uses the webpack externals feature to defer loading this module at the build stage until runtime in the users browser (code showing this is also below).

I've updated all relevant packages to the current versions and have no relevant dependency errors or outdated packages.

If any other context is needed, let me know, more information and examples is below.

gatsby build produces the following error:

success Building HTML renderer - 17.646s
failed Building static HTML for pages - 0.562s

 ERROR #95313 

Building static HTML failed

See our docs page for more info on this error: https://gatsby.dev/debug-html


> 1 | module.exports = __WEBPACK_EXTERNAL_MODULE_firebase_app__;
    | ^


  WebpackError: ReferenceError: __WEBPACK_EXTERNAL_MODULE_firebase_app__ is not defined
  
  - app":1 
    /external "firebase/app":1:1
  
  - bootstrap:19 
    /webpack/bootstrap:19:1
  
  - useFirebase.js:7 
    /src/hooks/useFirebase.js:7:18
  
  - bootstrap:19 
    /webpack/bootstrap:19:1
  
  - bootstrap:19 
    /webpack/bootstrap:19:1
  
  - bootstrap:19 
    /webpack/bootstrap:19:1
  
  - sync-requires.js:7 
    /.cache/_this_is_virtual_fs_path_/$virtual/sync-requires.js:7:49
  
  - bootstrap:19 
    /webpack/bootstrap:19:1
  
  - static-entry.js:11 
    /.cache/static-entry.js:11:22
  
  - utils.js:283 
    /[@gatsbyjs]/reach-router/lib/utils.js:283:1
  
  - plugin.js:5 
    /[@savvywombat]/tailwindcss-grid-areas/src/plugin.js:5:1
  
  - utils.js:163 
    /[@gatsbyjs]/reach-router/lib/utils.js:163:1

I had fixed a previous error where the custom webpack externals function was being called incorrectly since the update from gatsby 2 to gatsby 3.

The code in gatsby-node configuring the webpack externals may be directly relevant and currently looks like this:

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

Since this appears to also be directly relevant to the firebase module, below is the import lines from my custom useFirebase hook (this was previously taken from another stack overflow thread or github issue and worked in gatsby 2.

...
import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/firestore'
import 'firebase/storage'
import 'firebase/messaging'

let app
let messaging

const config = {
...
}

// don't initialize untill you're in the browser - required to work with Gatsby
if (typeof window !== 'undefined') {
  app = app || firebase.initializeApp(config)

Relevant Module versions and resolutions from package.json (I think this would be all):

  "dependencies": {
    "gatsby": "^3.2.1",
    "@firebase/app": "^0.6.18",
    "@firebase/auth": "^0.16.4",
    "@firebase/firestore": "^2.2.2",
    "@firebase/messaging": "^0.7.7",
    "@firebase/storage": "^0.4.6",
    ...
  }
  "resolutions": {
    "graphql": "^15.4.0",
    "graphql-compose": "^7.25.0",
    "webpack": "^5.24.2"
  }

If anyone has any experience or ideas with this issue I'd be grateful, thanks!

---

Update I tried replacing the onCreateWebpackConfig with the following alternate code:

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === 'build-html') {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /^@?firebase(\/(.+))?/,
            use: loaders.null()
          }
        ]
      }
    })
  }
}

Which gets rid of the old error and creates the following error:

failed Building static HTML for pages - 0.737s

 ERROR #95313 

Building static HTML failed

See our docs page for more info on this error: https://gatsby.dev/debug-html


  85 | ]);
  86 |
> 87 | proxyRequestMethods(Index, '_index', IDBIndex, [
     | ^
  88 |   'get',
  89 |   'getKey',
  90 |   'getAll',


  WebpackError: ReferenceError: IDBIndex is not defined
  
  - idb.mjs:87 
    /[idb]/lib/idb.mjs:87:1
  
  - bootstrap:19 
    /webpack/bootstrap:19:1
  
  - bootstrap:19 
    /webpack/bootstrap:19:1
  
  - bootstrap:19 
    /webpack/bootstrap:19:1
  
  - bootstrap:19 
    /webpack/bootstrap:19:1
  
  - bootstrap:19 
    /webpack/bootstrap:19:1
  
  - bootstrap:19 
    /webpack/bootstrap:19:1
  
  - bootstrap:19 
    /webpack/bootstrap:19:1
  
  - sync-requires.js:7 
    /.cache/_this_is_virtual_fs_path_/$virtual/sync-requires.js:7:49
  
  - bootstrap:19 
    /webpack/bootstrap:19:1

However, I'm not sure if this is further or not than the last attempt...

Answer 1

Please try this setting.

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

I referred to the following comments. point is to use commonjs. https://github.com/firebase/firebase-js-sdk/issues/2222#issuecomment-538072948

and I already answered the same problem. GatsbyJS with Firebase - WebpackError: ReferenceError: IDBIndex is not defined

Goodluck.

Answer 2

It seems that you went further with the last attempt, since the Firebase implementation it's not failing by the main methods but it is by the implementation itself.

I've faced the same issue a few weeks ago and I followed this GitHub thread, where the solution provided helped me in my case. In yours, since it's a custom implementation you may need to adapt it a little bit.

The idea relies on lazy loading Firebase module importation (dynamic import). In the highest component that uses Firebase, import it like this:

import('firebase').then(firebase => {
  firebase.initializeApp({ /* firebaseConfig goes here */});
  firebase.firestore().collection('items').doc('yJd1Fs5Ampttq6QKBoYF').get()
    .then(doc => {
      // do stuff with Firestore data
    });
});

I would suggest the following reading: https://kyleshevlin.com/firebase-and-gatsby-together-at-last, what may you gives some advices.