How to resolve IDB module error - Firebase v9 + React Native + Expo

9/14/2022

Request, Deliver, Revise, Done

Get unlimited UI Design & React Development for a fixed monthly price

50% off your first month

Introduction

Whilst setting up version 9 of the Firebase SDK in React Native/Expo, I came across this rather cryptic error:

IDB error message in a React Native project

If you’ve arrived at this article I’m guessing you’ve encountered the same issue and are a bit stumped - luckily there’s a very simple fix.

Why is this happening and how do I fix it?

The problem in a nutshell is that by default the metro bundler is not set to recognise commonJS files in Expo projects - and the IDB module is exporting an index.cjs file that the Firebase module is attempting to read. This means that although the file is there in our node_modules folder as part of the IDB package, the metro bundler can’t read it.

In order to get the metro bundler to recognise commonJS files, we need to create a metro configuration file in the root of our project and set it to resolve .cjs files.

Creating a metro config file

Create a file in the root of your project (where your package.json file lives) called metro.config.js and paste the following code:

const { getDefaultConfig } = require('@expo/metro-config');

const defaultConfig = getDefaultConfig(__dirname);

defaultConfig.resolver.assetExts.push('cjs');

module.exports = defaultConfig;

The magic here is the third line:

defaultConfig.resolver.assetExts.push('cjs');

The Metro bundler requires that we define all the file extensions that we want to use for both assets and source code - by default, CJS files are not included.

By adding this line we’re telling our Metro bundler to transform CJS files which should fix the problem - if you restart your bundler your project should now compile without the error.

For more information on configuring the Metro bundler in Expo, check out the Metro section of the Expo documentation.