[🐛] Unable to resolve module

[idlework]

Issue

After building dev build for Android or iOS the app starts i get the error:

1 | import { firebase } from '..';
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  2 |
  3 | /**
  4 |  * @typedef {import('@firebase/app').FirebaseApp} FirebaseApp
    at ModuleResolver.resolveDependency (/Users/***/***/***/***/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:112:15)

Release build fails during build when compiling bundle.

I was using React Native 74.7 in combination with react-native-firebase 21.2.0. I have tried upgrading to React Native 76.1 and react-native-firebase 21.6.1 but the issue remains.

The issue occured when I was creating detox tests, but even without detox or clean cache, reinstalled node_modules, native caches, metro cache, or even removing the repository and completely install it from scratch this issue is still there

When I replace import { firebase } from '..' for import { firebase } from '@react-native-firebase/app'; in all the packages the issue is fixed. But then other imports with from '..' still break.

I have tried using npm, yarn and pnpm to solve the issue but no difference between them.

Javascript

Click To Expand

package.json:

"dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.6.0",
    "@fortawesome/free-brands-svg-icons": "^6.6.0",
    "@fortawesome/pro-duotone-svg-icons": "^6.6.0",
    "@fortawesome/pro-light-svg-icons": "^6.6.0",
    "@fortawesome/pro-regular-svg-icons": "^6.6.0",
    "@fortawesome/pro-solid-svg-icons": "^6.6.0",
    "@fortawesome/pro-thin-svg-icons": "^6.6.0",
    "@fortawesome/react-native-fontawesome": "^0.3.2",
    "@fortawesome/sharp-solid-svg-icons": "^6.6.0",
    "@gorhom/bottom-sheet": "4.6.4",
    "@invertase/react-native-apple-authentication": "^2.4.0",
    "@react-native-async-storage/async-storage": "^2.0.0",
    "@react-native-clipboard/clipboard": "^1.14.3",
    "@react-native-community/cli": "^15.1.0",
    "@react-native-community/cli-platform-android": "^15.1.0",
    "@react-native-community/cli-platform-ios": "^15.1.0",
    "@react-native-community/netinfo": "^11.4.1",
    "@react-native-firebase/analytics": "^21.3.0",
    "@react-native-firebase/app": "^21.3.0",
    "@react-native-firebase/auth": "^21.3.0",
    "@react-native-firebase/crashlytics": "^21.3.0",
    "@react-native-firebase/dynamic-links": "^21.3.0",
    "@react-native-firebase/firestore": "^21.3.0",
    "@react-native-firebase/messaging": "^21.3.0",
    "@react-native-firebase/remote-config": "^21.3.0",
    "@react-native-firebase/storage": "^21.3.0",
    "@react-native-google-signin/google-signin": "^12.2.1",
    "@react-native-masked-view/masked-view": "^0.3.2",
    "@react-native/gradle-plugin": "^0.76.1",
    "@react-navigation/bottom-tabs": "^6.6.1",
    "@react-navigation/elements": "^1.3.31",
    "@react-navigation/native": "^6.1.18",
    "@react-navigation/native-stack": "^6.11.0",
    "@rnx-kit/metro-config": "^2.0.1",
    "@rnx-kit/metro-resolver-symlinks": "^0.2.1",
    "@sentry/react-native": "^5.33.1",
    "@tanstack/react-query": "^5.59.7",
    "algoliasearch": "^5.12.0",
    "babel-plugin-module-resolver": "^5.0.2",
    "base-64": "^1.0.0",
    "date-fns": "^4.1.0",
    "date-fns-tz": "^3.2.0",
    "geodist": "^0.2.1",
    "he": "^1.2.0",
    "jetifier": "^2.0.0",
    "jsc-android": "^250231.0.0",
    "lodash": "^4.17.21",
    "lottie-react-native": "^7.1.0",
    "moment": "^2.30.1",
    "moment-range": "^4.0.2",
    "moti": "^0.29.0",
    "nativewind": "^2.0.11",
    "p-memoize": "^4",
    "pluralize": "^8.0.0",
    "prop-types": "^15.8.1",
    "react": "^18.3.1",
    "react-dom": "18.3.1",
    "react-instantsearch": "^7.13.7",
    "react-native": "0.76.1",
    "react-native-animatable": "^1.4.0",
    "react-native-bootsplash": "^6.2.6",
    "react-native-calendars": "^1.1307.0",
    "react-native-device-info": "^14.0.0",
    "react-native-fbsdk-next": "^13.1.3",
    "react-native-gesture-handler": "^2.20.2",
    "react-native-iap": "12.15.7",
    "react-native-image-header-scroll-view": "^1.0.0",
    "react-native-image-picker": "^7.1.2",
    "react-native-inappbrowser-reborn": "^3.7.0",
    "react-native-keyboard-manager": "^6.5.16-0",
    "react-native-linear-gradient": "^2.8.3",
    "react-native-localize": "^3.3.0",
    "react-native-maps": "^1.18.2",
    "react-native-markdown-view": "^1.1.4",
    "react-native-mmkv": "^3.1.0",
    "react-native-permissions": "^4.1.5",
    "react-native-progress": "^5.0.1",
    "react-native-qrcode-svg": "^6.3.12",
    "react-native-reanimated": "3.16.1",
    "react-native-safe-area-context": "^4.14.0",
    "react-native-screens": "^3.35.0",
    "react-native-sha256": "^1.4.10",
    "react-native-svg": "^15.8.0",
    "react-native-swiper-flatlist": "^3.2.5",
    "remeda": "^2.16.0",
    "rn-range-slider": "^2.2.2",
    "semver": "^7.6.3",
    "typesense-instantsearch-adapter": "^2.8.0",
    "url": "^0.11.4",
    "use-sync-external-store": "^1.2.2",
    "util": "^0.12.5",
    "zod": "^3.23.8",
    "zustand": "^4.5.5"
  },
  "devDependencies": {
    "@babel/core": "^7.26.0",
    "@babel/plugin-proposal-decorators": "^7.25.9",
    "@babel/preset-env": "^7.26.0",
    "@babel/runtime": "^7.26.0",
    "@react-native/babel-preset": "0.76.1",
    "@react-native/codegen": "^0.76.1",
    "@react-native/eslint-config": "0.76.1",
    "@react-native/metro-config": "0.76.1",
    "@react-native/typescript-config": "0.76.1",
    "@tanstack/eslint-plugin-query": "^5.59.7",
    "@testing-library/react-native": "^12.8.1",
    "@tsconfig/react-native": "^3.0.5",
    "@types/jest": "^29.5.14",
    "@types/lodash": "^4.17.13",
    "@types/pluralize": "^0.0.33",
    "@types/react": "^18.3.12",
    "@types/react-test-renderer": "^18.3.0",
    "@types/uuid": "^10.0.0",
    "@typescript-eslint/eslint-plugin": "7.18.0",
    "@typescript-eslint/parser": "^7.18.0",
    "@vitejs/plugin-react": "^4.3.3",
    "babel-jest": "^29.7.0",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "detox": "^20.27.6",
    "eslint": "^8.57.0",
    "eslint-plugin-react": "^7.37.0",
    "eslint-plugin-react-hooks": "^4.6.2",
    "jest": "^29.7.0",
    "metro-react-native-babel-preset": "^0.77.0",
    "np": "^10.0.7",
    "postinstall-postinstall": "^2.1.0",
    "prettier": "^3.3.3",
    "prettier-plugin-jsdoc": "^1.3.0",
    "prettier-plugin-tailwindcss": "^0.6.8",
    "pretty-quick": "^4.0.0",
    "react-native-clean-project": "^4.0.3",
    "react-native-owl": "^1.4.0",
    "react-native-svg-transformer": "^1.5.0",
    "react-native-version": "^4.0.0",
    "react-test-renderer": "^18.3.1",
    "reactotron-react-native": "^5.1.9",
    "reactotron-react-query": "^1.0.4",
    "tailwindcss": "3.3.2",
    "typescript": "^5.6.3",
    "vite-tsconfig-paths": "^5.1.0",
    "vitest": "^2.1.4",
    "vitest-react-native": "^0.1.5"
  },
  "engines": {
    "node": ">=18"
  }

firebase.json for react-native-firebase v6:

{
  "react-native": {
    "android_task_executor_maximum_pool_size": 0
  }
}

Environment

Click To Expand

react-native info output:

System:
  OS: macOS 14.6.1
  CPU: (10) arm64 Apple M2 Pro
  Memory: 137.61 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.14.0
    path: ~/.nvm/versions/node/v20.14.0/bin/node
  Yarn: Not Found
  npm:
    version: 10.7.0
    path: ~/.nvm/versions/node/v20.14.0/bin/npm
  Watchman:
    version: 2024.08.12.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.1
      - iOS 18.1
      - macOS 15.1
      - tvOS 18.1
      - visionOS 2.1
      - watchOS 11.1
  Android SDK: Not Found
IDEs:
  Android Studio: 2023.1 AI-231.9392.1.2311.11330709
  Xcode:
    version: 16.1/16B40
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.7
    path: /usr/bin/javac
  Ruby:
    version: 2.7.6
    path: /Users/***/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.1.2
    wanted: ^15.1.0
  react:
    installed: 18.3.1
    wanted: ^18.3.1
  react-native:
    installed: 0.76.1
    wanted: 0.76.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

info React Native v0.76.3 is now available (your project is running on v0.76.1).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.76.3
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.76.1&to=0.76.3
info For more info, check out "https://reactnative.dev/docs/upgrading?os=macos".

• Platform that you're experiencing the issue on:
  • Both
• react-native-firebase version you're using that has this issue:
  • 21.2.0
  • 21.6.1
• Firebase module(s) you're using that has the issue:
  • analytics": "^21.6.1"
  • app": "^21.6.1"
  • auth": "^21.6.1"
  • crashlytics": "^21.6.1"
  • dynamic-links": "^21.6.1"
  • firestore": "^21.6.1"
  • messaging": "^21.6.1"
  • remote-config": "^21.6.1"
  • storage": "^21.6.1"
• Are you using TypeScript?
  • Yes & ^5.6.3

Other information did not seem to be related to the issue due to a issue with resolving the package in metro. But if you like more information let me know.

A related issue can be found here but it was closed due to incorrect issue formatting

[mikehardy]

🤔
Going to need a minimal reproducer on this one, I was doing build tests most of the weekend and yesterday and I do not reproduce any build failure (or failure to run - it ran fine)

I suspect something is interfering with module resolution somehow in metro config or similar, but no proof

https://github.com/mikehardy/rnfbdemo/blob/main/make-demo.sh

[idlework]

Thanks for the hint. I Just came to report my metro config and version:

Metro version

v0.81.0

Metro config

const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");
const MetroSymlinksResolver = require("@rnx-kit/metro-resolver-symlinks");

const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;

/**
 * Metro configuration https://reactnative.dev/docs/metro * *
 *
 * @type {import("metro-config").MetroConfig}
 */
const config = {
  projectRoot: __dirname,

  transformer: {
    babelTransformerPath: require.resolve("react-native-svg-transformer"),
  },
  resolver: {
    assetExts: assetExts.filter((/** @type {string} */ ext) => ext !== "svg"),
    sourceExts: [...sourceExts, "svg"],
    enableGlobalPackages: true,
    resolveRequest: MetroSymlinksResolver(),
  },
};

module.exports = mergeConfig(defaultConfig, config);

[mikehardy]

Going to need a minimal reproducer on this one,

☝️ still valid

suspect MetroSymlinksResolver is not meeting our expectations here for some reason. It isn't a package I use or have tested, so no idea unfortunately

[idlework]

I am going to try to make a reproduction in an new react native project. Should I not succeed in making reproduction I will also let you know. This will probably be tomorrow.