Error: While trying to resolve module `idb`

[shuzootani]

trafficstars

TL;DR

I ended up downgrading the version in which the error is gone.

[REQUIRED] Describe your environment

• Operating System version: _____
• Browser version: _____
• Firebase SDK version: 9.8.1
• Firebase Product: auth, firestore, storage

  System:
    OS: macOS 11.6.2
    CPU: (8) x64 Apple M1
    Memory: 51.52 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    Yarn: 1.22.10 - /opt/homebrew/bin/yarn
    npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
    Watchman: 2022.03.07.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.2 - /opt/homebrew/bin/pod
    Homebrew: 3.4.10 - /opt/homebrew/bin/brew
    pip3: 20.2.3 - /usr/bin/pip3
  Utilities:
    Make: 3.81 - /usr/bin/make
    GCC: 4.2.1 - /usr/bin/gcc
    Git: 2.32.0 - /usr/bin/git
    Clang: 13.0.0 - /usr/bin/clang
  Servers:
    Apache: 2.4.51 - /usr/sbin/apachectl
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3
  IDEs:
    Android Studio: 2020.3 AI-203.7717.56.2031.7935034
    Nano: 2.0.6 - /usr/bin/nano
    VSCode: 1.66.1 - /usr/local/bin/code
    Vim: 8.2 - /usr/local/bin/vim
    Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild
  Languages:
    Bash: 3.2.57 - /bin/bash
    Java: 11.0.10 - /usr/bin/javac
    Perl: 5.30.2 - /usr/bin/perl
    PHP: 7.3.29 - /usr/bin/php
    Python: 2.7.16 - /usr/bin/python
    Python3: 3.8.9 - /usr/bin/python3
  Databases:
    SQLite: 3.32.2 - /Users/shuzo/Library/Android/sdk/platform-tools/sqlite3
  Browsers:
    Chrome: 101.0.4951.54
    Safari: 15.2
  NpmPackages:
    @babel/core: ^7.12.9 => 7.17.10
    @babel/runtime: ^7.12.5 => 7.17.9
    @react-native-community/eslint-config: ^2.0.0 => 2.0.0
    @react-navigation/native: ^6.0.10 => 6.0.10
    @react-navigation/native-stack: ^6.6.2 => 6.6.2
    @sentry/react-native: ^3.4.2 => 3.4.2
    @types/jest: ^26.0.23 => 26.0.24
    @types/react-native: ^0.67.3 => 0.67.6
    @types/react-test-renderer: ^17.0.1 => 17.0.2
    @types/styled-components: ^5.1.25 => 5.1.25
    @types/styled-components-react-native: ^5.1.3 => 5.1.3
    @typescript-eslint/eslint-plugin: ^5.17.0 => 5.23.0
    @typescript-eslint/parser: ^5.17.0 => 5.23.0
    babel-jest: ^26.6.3 => 26.6.3
    eslint: ^7.32.0 => 7.32.0
    firebase: 9.8.0 => 9.8.0
    husky: ^7.0.4 => 7.0.4
    jest: ^26.6.3 => 26.6.3
    lint-staged: ^12.3.8 => 12.4.1
    metro-react-native-babel-preset: ^0.67.0 => 0.67.0
    react: 17.0.2 => 17.0.2
    react-native: 0.68.1 => 0.68.1
    react-native-safe-area-context: ^4.2.4 => 4.2.5
    react-native-screens: ^3.13.1 => 3.13.1
    react-test-renderer: 17.0.2 => 17.0.2
    styled-components: ^5.3.5 => 5.3.5
    typescript: ^4.4.4 => 4.6.4

[REQUIRED] Describe the problem

I'm trying to use the sdk v9.8.1 for a react native project. I followed the instruction to setup firebase. Looking at the error, it seems like some idb related resolving module issue but I don't really get what it is. so I'm wondering if I'm missing some react native specific configuration. I'd appreciate if you could let me know if I'm getting something wrong. Thanks.

Steps to reproduce:

Relevant Code:

import { getApps, initializeApp } from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/storage';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';
import { getStorage } from 'firebase/storage';
import { devConfig, prodConfig } from './config';

if (!getApps().length) {
  const config = __DEV__ ? devConfig : prodConfig;
  initializeApp(config);
}

export const auth = getAuth();
export const firestore = getFirestore();
export const storage = getStorage();

[frippera]

I have the same issue using expo 44.0.0 and react-native 0.64.3, for now I have downgraded to 9.2.0 and that works for the time being.

[hsubox76]

That is odd. Does node_modules/idb/build/index.cjs exist in your project? I did a quick install of 9.8.1 into a clean project and I do see it.

Also, searching around, I found some issues with Metro recognizing CJS files and suggest adding cjs to resolver.sourceExts in the metro config, so let me know if that helps: https://stackoverflow.com/questions/70071602/main-module-field-cannot-be-resolved-after-installing-apollo-client

[edi]

I have the same issue, as already mentioned in the PR comments. Once upgraded to 9.8.0 or 9.8.1, the error pops up. The file is there, it exists, but the error pops up.

Maybe related to https://github.com/facebook/metro/pull/770

[SohelIslamImran]

I have the same issue

[SohelIslamImran]

To resolve this issue, create a metro.config.js file in the project root. In the file add the file extension cjs. details

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

const defaultConfig = getDefaultConfig(__dirname);

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

module.exports = defaultConfig;

[frippera]

To resolve this issue, create a metro.config.js file in the project root. In the file add the file extension cjs. details

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

const defaultConfig = getDefaultConfig(__dirname);

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

module.exports = defaultConfig;

@SohelIslamImran Thanks, that resolved it for me :-)

[hsubox76]

I have the same issue, as already mentioned in the PR comments. Once upgraded to 9.8.0 or 9.8.1, the error pops up. The file is there, it exists, but the error pops up.

Maybe related to facebook/metro#770

Thanks for the link. In light of this I think that the correct solution is probably that frameworks should be adding cjs to the default Metro config (and developers who have existing projects should add it). I think it's pretty reasonable for a JS library to have a *.cjs file in the main field.

However, I'm not an expert in Metro or React Native so I'm open to other perspectives on it.

[hsubox76]

I'm going to close this issue as it can be fixed by changing the Metro config. Feel free to let me know if there is anything the Firebase JS SDK should be doing on our end to help with this issue and I can reopen it.

[SimonAM]

For me this issue was conflating with refactoring to the new version. I was passing the old DatabaseRef.on('value') to the new onValue(databaseRef, () => xyz)

[mfellner]

I'm afraid this is still an issue. The metro bundler configuration allows for the .cjs file to be resolved. However, it appears that this file is not properly bundled and leads to another runtime error:

Possible Unhandled Promise Rejection (id: 0):
FirebaseError: Firebase: Error thrown when reading from storage. Original error: (0 , _idb.openDB) is not a function. (app/storage-get).

This error is thrown at https://github.com/firebase/firebase-js-sdk/blob/%40firebase/app%400.7.26/packages/app/src/indexeddb.ts#L37

function getDbPromise(): Promise<IDBPDatabase<AppDB>> {
  if (!dbPromise) {
    dbPromise = openDB<AppDB>(DB_NAME, DB_VERSION, {

In the minified bundle this code looks like this:

var _idb = _$$_REQUIRE(_dependencyMap[10], "idb");

// ...

function getDbPromise() {
  if (!dbPromise) {
    dbPromise = (0, _idb.openDB)(DB_NAME, DB_VERSION, {

When debugging the code, _idb somehow resolves to 9 instead of the actual idb module.

My environment:

• Expo 45.0.5
• react-native 0.68.2
• firebase 9.8.3
• @firebase/app 0.7.26
• idb 7.0.1
• metro 0.67.0

Assessment

This is probably an issue with Metro bundler itself. Either that or the generated .cjs file of idb is wrong but at a first glance this does not seem to be an issue.

Given that the Metro bundler version is already a bit older, this may have been fixed already. However, Expo wants to use that older version so I suppose they need to upgrade first.

Workaround

Metro bundler can actually process the idb/index.js file which is a native ES module. So as a workaround, the package.json file of idb can be modified so that "main": "index.js".

In this case the custom metro configuration is not necessary at all.

The change can be persisted by using patch-package and yarn patch-package idb --exclude 'nothing'

[pinturic]

bump

[hsubox76]

Can @mfellner report the suggested package.json fix to the idb repo (https://github.com/jakearchibald/idb) and see if the maintainer thinks it's a good fix, or if another fix can be done? Or can anyone else interested in this bug who has a good understanding of the Metro issue report it in that repo? Unfortunately if the fix needs to be done there, we can't do it. I can report it but I don't think I'm in as good of a position to explain what the deal is with Metro, or provide an example.

[hsubox76]

Metro said they added support for CJS in July/August 2022 (https://github.com/facebook/metro/pull/770) so I'm guessing this issue is fixed and the workaround shouldn't be needed anymore. Let me know if I'm wrong and I'll reopen this.