Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

React 18 StrictMode causes "AuthUI instance is deleted" error

Aperta
  • Qualcosa non va?
#172 4 commenti 9 reazioni 0 assegnatari Vedi su GitHub

@gvillenave ci sta già lavorando.

Dal 11/5/2022.

  • #173 di @gvillenave — aperta

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
45/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
firebase, javascript, react
Ambito
authentication, frontend

Direzione di ricerca

Inizia individuando le implementazioni di componentDidMount e componentWillUnmount del componente wrapper, quindi confronta il loro comportamento di pulizia con il ciclo di vita di React 18 StrictMode descritto qui. Riproduci il problema in un'app React 18 StrictMode locale e verifica che la pulizia lasci utilizzabile l'istanza AuthUI e che l'UI venga renderizzata senza l'errore di eliminazione.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

When using react-firebaseui in React 18 with Strict Mode enabled and running a local dev server, the UI doesn’t render at all and produces this error in the console:

Uncaught (in promise) Error: AuthUI instance is deleted!

This is because of a change in behavior in Strict Mode to support concurrent features in React 18. Now components are mounted twice. See:

It seems the culprit is the deletion of the AuthUI instance when the component is unmounted. Reading the firebaseui documentation, it seems that this isn’t necessary to do, since the firebaseUiWidget property will either get the existing instance or create a new one.

I’ve ported the existing componentDidMount and componentWillUnmount code to a useEffect and removed the instance deletion, and used the modular v9 version of onAuthStateChanged. This seems to work for me:

useEffect(() => {
  let firebaseUiWidget: firebaseui.auth.AuthUI;
  let userSignedIn = false;
  let unregisterAuthObserver: ReturnType<typeof onAuthStateChanged>;

  // Get or Create a firebaseUI instance.
  firebaseUiWidget =
    firebaseui.auth.AuthUI.getInstance() ||
    new firebaseui.auth.AuthUI(firebaseAuth);

  if (uiConfig.signInFlow === "popup") firebaseUiWidget.reset();

  // We track the auth state to reset firebaseUi if the user signs out.
  unregisterAuthObserver = onAuthStateChanged(firebaseAuth, (user) => {
    if (!user && userSignedIn) firebaseUiWidget.reset();
    userSignedIn = !!user;
  });

  // Render the firebaseUi Widget.
  firebaseUiWidget.start("#" + ELEMENT_ID, uiConfig);

  return () => {
    unregisterAuthObserver();
    firebaseUiWidget.reset();
  };
}, [uiConfig]);

Is there something that I’m missing that would require the instance to be deleted entirely?

Lingua principale
JavaScript
Stelle
1.3k
Fork
246
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di firebase/firebaseui-web-react

Tutte le issue di firebase/firebaseui-web-react

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.