import package from firebase returns undefined

[Albert-Gao]

Can not import package from firebase

1. yarn start
2. press w to open the browser
3. press Test Firebase Auth on the frontpage
4. browserLocalPersistence is undefined

Not happen on normal Expo web

1. expo init a new project
2. yarn add firebase
3. just copy the code over, console.log() the imported package
4. It shows the value below
   

repo here: (lib version: 0.22)

https://github.com/Albert-Gao/expo-router-web-try-out/tree/firebase-error

[EvanBacon]

Unrelated to the router, but my first guess would be that firebase is using react-native import fields in the package.json and don't account for Metro web. I'm not sure if Metro allows for swapping the resolver main fields dynamically based on platform but I could check.

[Albert-Gao]

Indeed, not related to the router directly, but since the metro is a critical component of expo router. I posted here 😄 will do more digging later

[Albert-Gao]

Updated the example to the latest version and cross-posted this issue in metro repo :)
facebook/metro#878

[huntie]

Confirming @EvanBacon's suspicions, @firebase/auth specifies top-level "react-native" and "browser" fields in its package manifest, which causes Metro to select the dist/rn/index.js module (which does not export browserLocalPersistence).

https://github.com/firebase/firebase-js-sdk/blob/784607676ebe9889e99c1c735173549dcda0fd7c/packages/auth/package.json#L7-L8

Workarounds for app devs

• If the project is web-only, overriding resolver.resolverMainFields to a value of ['browser', 'main'] will no longer resolve "react-native" exports across packages.

• Configuring resolver.resolveRequest as documented will allow you to set a specific override for imports of 'firebase/auth' — perhaps to either of the following files within node_modules/@firebase/auth/.

  "browser": "dist/esm2017/index.js",
  "cordova": "dist/cordova/index.js",

Follow-ups

• On the Firebase side, submitting a PR updating index.rn.js in @firebase/auth to expose browserLocalPersistence (citing that this enables use in react-native-web) will fix this issue for others under Metro's current behaviour.
• On the Metro side, we are actively reviewing the behaviours of the top-level "react-native" and "browser" package.json fields. The rollout of Expo Web with Metro is making issues like this visible, which may motivate us towards a short term config escape hatch — before a revision to this behaviour (where we will not overlap "react-native" and "browser") coming with support for package "exports".

cc @motiz88 @robhogan

[Albert-Gao]

Thanks so much for your time: @huntie
It's a web+native project. I will try the 2nd workaround(resolver.resolveRequest) for now :)

created a PR on firebase side: firebase/firebase-js-sdk#6683

[Albert-Gao]

Thanks for the fix! @EvanBacon

https://github.com/expo/expo/pull/19529/files

according to the code, it should be fallback to the preferredMainFields when EXPO_METRO_NO_MAIN_FIELD_OVERRIDE ===false

however, I tried it, still undefined

I am using this script,

{
  "scripts": {
    "web": "EXPO_METRO_NO_MAIN_FIELD_OVERRIDE=false npx expo start --dev-client --web"
  },
}

What am I missing here? :)

[austin43]

@Albert-Gao I'm struggling with this one too, as there's sparse examples for how to use metro resolver.resolveRequest. Our use-case is to have signInWithPopup and signInWithRedirect from firebase/auth. As of metro@0.74 it stopped working.

resolverMainFields works without EXPO_METRO_NO_MAIN_FIELD_OVERRIDE for me on web.

We have a native app too though so the first option is not viable.

Could you share what you used for resolveRequest?