最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Cannot read property 'RecaptchaVerifier' of undefined - Stack Overflow

programmeradmin5浏览0评论

I am trying to implement phone auth using firebase. I was going through this guide -> /

Cannot read property 'RecaptchaVerifier' of undefined<
    at PhoneLoginComponent.ngOnInit (phone-loginponent.ts:41)
    at callHook (core.js:2922)
    at callHooks (core.js:2892)
    at executeInitAndCheckHooks (core.js:2844)
    at refreshView (core.js:7213)
    at refreshEmbeddedViews (core.js:8289)
    at refreshView (core.js:7222)
    at refreshComponent (core.js:8335)
    at refreshChildComponents (core.js:6991)
    at refreshView (core.js:7248)

I keep getting the above error

import { auth } from 'firebase/app';

ngOnInit(): void {
   this.windowRef = this.win.windowRef;
   this.windowRef.recaptchaVerifier = new  auth.RecaptchaVerifier('recaptcha-container');
   this.windowRef.recaptchaVerifier.render();
}

I have already initialized firebase app in app.module.ts

from package.json
"firebase": "^7.15.5"
"@angular/fire": "^6.0.2",

I am trying to implement phone auth using firebase. I was going through this guide -> https://fireship.io/lessons/firebase-phone-authentication-with-angular-4-tutorial/

Cannot read property 'RecaptchaVerifier' of undefined<
    at PhoneLoginComponent.ngOnInit (phone-login.ponent.ts:41)
    at callHook (core.js:2922)
    at callHooks (core.js:2892)
    at executeInitAndCheckHooks (core.js:2844)
    at refreshView (core.js:7213)
    at refreshEmbeddedViews (core.js:8289)
    at refreshView (core.js:7222)
    at refreshComponent (core.js:8335)
    at refreshChildComponents (core.js:6991)
    at refreshView (core.js:7248)

I keep getting the above error

import { auth } from 'firebase/app';

ngOnInit(): void {
   this.windowRef = this.win.windowRef;
   this.windowRef.recaptchaVerifier = new  auth.RecaptchaVerifier('recaptcha-container');
   this.windowRef.recaptchaVerifier.render();
}

I have already initialized firebase app in app.module.ts

from package.json
"firebase": "^7.15.5"
"@angular/fire": "^6.0.2",

Share Improve this question edited Jul 2, 2020 at 15:28 Frank van Puffelen 600k85 gold badges889 silver badges859 bronze badges asked Jul 2, 2020 at 15:14 Koushik BoinepallyKoushik Boinepally 4204 silver badges9 bronze badges 0
Add a ment  | 

5 Answers 5

Reset to default 6

This works for me:

import firebase from 'firebase/app';
import 'firebase/auth';

First solution Try this import

import { auth } from 'firebase';

Second solution: if that doesn't work, try as it is done the link it is refered to see if that works

import * as firebase from 'firebase';

then use it like

new firebase.auth.RecaptchaVerifier('recaptcha-container')

You can either do:

import { auth } from 'firebase';

Or:

import * as firebase from 'firebase/app';
import 'firebase/auth';

And then: new firebase.auth.RecaptchaVerifier

Change the import to:

import * as firebase from 'firebase';

and then:

this.windowRef.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');

Sometimes this error throwed when i reloaded page. I use Ionic + Angular. So the problem could be in ngOnInit. The method calls it too early, and to solute this you can do:

  1. Bring your recaptha to angular lifecycle hooks which goes last (AfterContentInit, AfterContentChecked, or you could try with another hooks)

    ngAfterContentChecked() { // recaptcha }

  2. For ionic i had page hook ionViewDidEnter

    ionViewDidEnter() { // recaptcha }

  3. I can't place new RecaptchaVerifier with new firebase.auth.RecaptchaVerifier('recaptcha-container');

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container'); - does'nt work like that

the right way:

<!-- html -->
<div id="recaptcha-container"></div>

// ts
let recaptcha: any;
  ngAfterContentChecked(): void {
  this.recaptcha = new firebase.auth.RecaptchaVerifier('recaptcha-container');
}
发布评论

评论列表(0)

  1. 暂无评论