Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[web] Error in FirebaseRecaptchaVerifierModal.web.tsx #17753

Open
rissois opened this issue Jun 4, 2022 · 7 comments
Open

[web] Error in FirebaseRecaptchaVerifierModal.web.tsx #17753

rissois opened this issue Jun 4, 2022 · 7 comments
Labels
Firebase Issue accepted Platform: web Using Expo in the browser

Comments

@rissois
Copy link
Contributor

rissois commented Jun 4, 2022 •
edited

DRAFT PULL REQUEST: #17757

Summary

FirebaseRecaptcha does not work on web (at least with "firebase": "^9.8.2"). The code works just fine on iOS and Android. The code was copy and pasted from the Full Phone Authentication example linked at the bottom of the Expo FirebaseRecaptcha Example Usage with my own FIREBASE_CONFIG.

Error messages

index.esm2017.js:230 Uncaught FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app-compat/no-app).
    at Object.app (index.esm2017.js:230:1)
    at new RecaptchaVerifier (index.esm2017.js:923:1)
    at FirebaseRecaptchaVerifierModal._this.setRef (FirebaseRecaptchaVerifierModal.web.tsx:26:1)
    at commitAttachRef (react-dom.development.js:20875:1)
    at commitLayoutEffects (react-dom.development.js:23431:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at commitRootImpl (react-dom.development.js:23151:1)
    at unstable_runWithPriority (scheduler.development.js:468:1)
    at runWithPriority$1 (react-dom.development.js:11276:1)
    at commitRoot (react-dom.development.js:22990:1)
    at performSyncWorkOnRoot (react-dom.development.js:22329:1)
    at react-dom.development.js:11327:1
    at unstable_runWithPriority (scheduler.development.js:468:1)
    at runWithPriority$1 (react-dom.development.js:11276:1)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322:1)
    at flushSyncCallbackQueue (react-dom.development.js:11309:1)
    at scheduleUpdateOnFiber (react-dom.development.js:21893:1)
    at Object.enqueueForceUpdate (react-dom.development.js:12504:1)
    at AnimatedComponent../node_modules/react/cjs/react.development.js.Component.forceUpdate (react.development.js:384:1)
    at AnimatedProps.AnimatedComponent._this._animatedPropsCallback [as _callback] (createAnimatedComponent.js:103:1)
    at AnimatedProps.update (AnimatedProps.js:116:1)
    at AnimatedValue.js:62:1
    at Set.forEach (<anonymous>)
    at _flush (AnimatedValue.js:61:1)
    at AnimatedValue._updateValue (AnimatedValue.js:287:1)
    at TimingAnimation._onUpdate (AnimatedValue.js:247:1)
    at TimingAnimation.onUpdate (TimingAnimation.js:125:1)

------------------------------------------------------------------------------------
    
The above error occurred in the <div> component:

    at div
    at FirebaseRecaptchaVerifierModal (http://localhost:19006/static/js/bundle.js:87247:81)
    at div
    at http://localhost:19006/static/js/bundle.js:172703:25
    at SafeView (http://localhost:19006/static/js/bundle.js:204875:37)
    at AuthScreen (http://localhost:19006/static/js/bundle.js:6589:25)
    at StaticContainer (http://localhost:19006/static/js/bundle.js:66705:16)
    at EnsureSingleNavigator (http://localhost:19006/static/js/bundle.js:66386:23)
    at SceneView (http://localhost:19006/static/js/bundle.js:66595:21)
    at div
    at http://localhost:19006/static/js/bundle.js:172703:25
    at div
    at http://localhost:19006/static/js/bundle.js:172703:25
    at div
    at http://localhost:19006/static/js/bundle.js:172703:25
    at CardSheet (http://localhost:19006/static/js/bundle.js:77668:22)
    at div
    at http://localhost:19006/static/js/bundle.js:172703:25
    at AnimatedComponent (http://localhost:19006/static/js/bundle.js:180210:37)
    at AnimatedComponentWrapper
    at Dummy (http://localhost:19006/static/js/bundle.js:76155:23)
    at div
    at http://localhost:19006/static/js/bundle.js:172703:25
    at AnimatedComponent (http://localhost:19006/static/js/bundle.js:180210:37)
    at AnimatedComponentWrapper
    at div
    at http://localhost:19006/static/js/bundle.js:172703:25
    at Card (http://localhost:19006/static/js/bundle.js:76876:81)
    at CardContainer (http://localhost:19006/static/js/bundle.js:77384:33)
    at div
    at http://localhost:19006/static/js/bundle.js:172703:25
    at NativeScreen (http://localhost:19006/static/js/bundle.js:162998:81)
    at AnimatedComponent (http://localhost:19006/static/js/bundle.js:180210:37)
    at AnimatedComponentWrapper
    at MaybeScreen (http://localhost:19006/static/js/bundle.js:76726:23)
    at div
    at http://localhost:19006/static/js/bundle.js:172703:25
    at MaybeScreenContainer (http://localhost:19006/static/js/bundle.js:76714:22)
    at div
    at http://localhost:19006/static/js/bundle.js:172703:25
    at Background (http://localhost:19006/static/js/bundle.js:70888:20)
    at CardStack (http://localhost:19006/static/js/bundle.js:77874:81)
    at div
    at http://localhost:19006/static/js/bundle.js:172703:25
    at NativeSafeAreaProvider (http://localhost:19006/static/js/bundle.js:162405:23)
    at SafeAreaProvider (http://localhost:19006/static/js/bundle.js:162602:23)
    at SafeAreaProviderCompat (http://localhost:19006/static/js/bundle.js:72008:23)
    at div
    at http://localhost:19006/static/js/bundle.js:172703:25
    at StackView (http://localhost:19006/static/js/bundle.js:78344:81)
    at StackNavigator (http://localhost:19006/static/js/bundle.js:75730:17)
    at EnsureSingleNavigator (http://localhost:19006/static/js/bundle.js:66386:23)
    at BaseNavigationContainer (http://localhost:19006/static/js/bundle.js:66019:27)
    at ThemeProvider (http://localhost:19006/static/js/bundle.js:72786:20)
    at NavigationContainerInner (http://localhost:19006/static/js/bundle.js:72425:25)
    at AppNavigator (http://localhost:19006/static/js/bundle.js:9713:96)
    at Provider (http://localhost:19006/static/js/bundle.js:187510:3)
    at App (http://localhost:19006/static/js/bundle.js:5740:68)
    at ExpoRootComponent (http://localhost:19006/static/js/bundle.js:91733:83)
    at div
    at http://localhost:19006/static/js/bundle.js:172703:25
    at div
    at http://localhost:19006/static/js/bundle.js:172703:25
    at AppContainer (http://localhost:19006/static/js/bundle.js:164563:24)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

------------------------------------------------------------------------------------

index.esm2017.js:230 Uncaught FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app-compat/no-app).
    at Object.app (index.esm2017.js:230:1)
    at new RecaptchaVerifier (index.esm2017.js:923:1)
    at FirebaseRecaptchaVerifierModal._this.setRef (FirebaseRecaptchaVerifierModal.web.tsx:26:1)
    at commitAttachRef (react-dom.development.js:20875:1)
    at commitLayoutEffects (react-dom.development.js:23431:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at commitRootImpl (react-dom.development.js:23151:1)
    at unstable_runWithPriority (scheduler.development.js:468:1)
    at runWithPriority$1 (react-dom.development.js:11276:1)
    at commitRoot (react-dom.development.js:22990:1)
    at performSyncWorkOnRoot (react-dom.development.js:22329:1)
    at react-dom.development.js:11327:1
    at unstable_runWithPriority (scheduler.development.js:468:1)
    at runWithPriority$1 (react-dom.development.js:11276:1)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322:1)
    at flushSyncCallbackQueue (react-dom.development.js:11309:1)
    at scheduleUpdateOnFiber (react-dom.development.js:21893:1)
    at Object.enqueueForceUpdate (react-dom.development.js:12504:1)
    at AnimatedComponent../node_modules/react/cjs/react.development.js.Component.forceUpdate (react.development.js:384:1)
    at AnimatedProps.AnimatedComponent._this._animatedPropsCallback [as _callback] (createAnimatedComponent.js:103:1)
    at AnimatedProps.update (AnimatedProps.js:116:1)
    at AnimatedValue.js:62:1
    at Set.forEach (<anonymous>)
    at _flush (AnimatedValue.js:61:1)
    at AnimatedValue._updateValue (AnimatedValue.js:287:1)
    at TimingAnimation._onUpdate (AnimatedValue.js:247:1)
    at TimingAnimation.onUpdate (TimingAnimation.js:125:1)

------------------------------------------------------------------------------------

Uncaught ReferenceError: process is not defined
    at Object.4043 (<anonymous>:2:13168)
    at r (<anonymous>:2:306599)
    at Object.8048 (<anonymous>:2:9496)
    at r (<anonymous>:2:306599)
    at Object.8641 (<anonymous>:2:1379)
    at r (<anonymous>:2:306599)
    at <anonymous>:2:315627
    at <anonymous>:2:324225
    at <anonymous>:2:324229
    at HTMLIFrameElement.e.onload (index.js:1:1)

Managed or bare workflow? If you have ios/ or android/ directories in your project, the answer is bare!

managed

What platform(s) does this occur on?

Web

SDK Version (managed workflow only)

45

Environment

System:
  OS: macOS 12.4
  Shell: 3.2.57 - /bin/bash
Binaries:
  Node: 16.13.2 - /usr/local/bin/node
  Yarn: 1.22.4 - /usr/local/bin/yarn
  npm: 8.1.2 - /usr/local/bin/npm
  Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
  CocoaPods: 1.11.2 - /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms: DriverKit 21.4, iOS 15.5, macOS 12.3, tvOS 15.4, watchOS 8.5
  Android SDK:
    API Levels: 30, 32
    Build Tools: 28.0.3, 29.0.2, 30.0.0, 30.0.2
    System Images: android-32 | Google APIs Intel x86 Atom_64
IDEs:
  Android Studio: 2021.2 AI-212.5712.43.2112.8609683
  Xcode: 13.4/13F17a - /usr/bin/xcodebuild
npmPackages:
  babel-preset-expo: ~9.1.0 => 9.1.0 
  expo: ^45.0.0 => 45.0.4 
  react: 17.0.2 => 17.0.2 
  react-dom: 17.0.2 => 17.0.2 
  react-native: 0.68.2 => 0.68.2 
  react-native-web: 0.17.7 => 0.17.7 
npmGlobalPackages:
  eas-cli: 0.52.0
  expo-cli: 5.4.6
Expo Workflow: managed

Reproducible demo

This issue with Snack prevents me from creating a working demo. The code largely copies https://docs.expo.dev/versions/latest/sdk/firebase-recaptcha/#example-usage.
@rissois rissois added the needs validation Issue needs to be validated label Jun 4, 2022
@rissois
Copy link
Contributor Author

rissois commented Jun 5, 2022

Confirming that apps/bare-expo is also throwing this error.

@rissois rissois mentioned this issue Jun 5, 2022
Draft
1 task
@rissois
Copy link
Contributor Author

rissois commented Jun 5, 2022

Draft pull request created #17757 . Error is no longer thrown and recaptcha works, but request could use a review and polish.

@brentvatne brentvatne added Issue accepted Platform: web Using Expo in the browser Firebase and removed needs validation Issue needs to be validated labels Jun 28, 2022
@expo-bot
Copy link
Collaborator

Thank you for filing this issue!
This comment acknowledges we believe this may be a bug and there’s enough information to investigate it.
However, we can’t promise any sort of timeline for resolution. We prioritize issues based on severity, breadth of impact, and alignment with our roadmap. If you’d like to help move it more quickly, you can continue to investigate it more deeply and/or you can open a pull request that fixes the cause.

@wezter96
Copy link

Is this still an active issue?
@rissois I'm having the same issue now when trying to use FirebaseRecaptchaVerifierModal on web.

@rissois
Copy link
Contributor Author

rissois commented Aug 31, 2022

@wezter96 I do not see any changes to the package that would suggest it has been fixed.

Please see the pull request I made #17757 and apply those chances with patch-package if you'd like to get it working on web. (note: ignore the expo-camera changes in the commit, you only need to alter the following files (make sure to build them!):
apps/native-component-list/src/screens/FirebaseRecaptchaScreen.tsx
packages/expo-firebase-recaptcha/src/FirebaseRecaptchaVerifierModal.web.tsx

@bdhcode
Copy link

bdhcode commented Sep 8, 2022

Any progress on this issue?

@RazaShehryar
Copy link

Any update on this @brentvatne ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Firebase Issue accepted Platform: web Using Expo in the browser
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@brentvatne @wezter96 @bdhcode @expo-bot @RazaShehryar @rissois