WebpackError: ReferenceError: self is not defined

[ashishch-98]

I am using Firebase Cloud Messaging with GatsbyJs. For setting up FCM I have used gatsby-plugin-firebase-messaging. So on gatsby develop everything works as it should, but on gatsby-build it starts to break.

The error on build was WebpackError: ReferenceError: IDBIndex is not defined. I used the solution given in this thread and the error was eliminated but now a new error is there during the build.

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


  190 |     }
  191 | 
> 192 |     return React.createElement.apply(null, createElementArgArray);
      | ^
  193 |   }
  194 | 
  195 |   return React.createElement.apply(null, args);


  WebpackError: ReferenceError: self is not defined

  - esm.js:192 
    node_modules/@mdx-js/react/dist/esm.js:192:1

  - PushNotifications.js:26 
    src/components/PushNotifications.js:26:34

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, 'umd ' + request);
        }
        callback();
      })
    });
  }
};

Why it is there and how can it be solved?

[nibtime]

@ashishch-98

You can prevent such problems altogether with dynamic imports of Firebase services and without using a Gatsby plugin. I provided an answer in another discussion that shows how to do that.