Error: While trying to resolve module `idb`

[shuzootani]

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 facebook/metro#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)