Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'. TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.
at useClientEffectQrl (http://127.0.0.1:5173/node_modules/@builder.io/qwik/core.mjs?v=498fe5d2:3382:23)
at Login_component_FYibw9YFqrU (http://127.0.0.1:5173/src/login_component_fyibw9yfqru.js?t=1660286532256:10:5)
This was working in 0.0.30 and is now failing in 0.0.100. I using Firebase and the FirebaseUI to handle the login forms etc. I may not be following the best practice and would be happy to update docs once I've got it worked out. I had thought that useClientEffect ran after client render, but presume that is wrong?
Whats the proper pattern for binding code to an element after its rendered?
import { component$, useClientEffect$, useStyles$ } from "@builder.io/qwik";
import { EmailAuthProvider, getAuth, GoogleAuthProvider } from "firebase/auth";
import { auth } from "firebaseui";
import fbUiCSS from "firebaseui/dist/firebaseui.css";
export const Login = component$(() => {
useStyles$(fbUiCSS);
useClientEffect$(() => {
const userAuth = getAuth();
const ui = new auth.AuthUI(userAuth);
const uiConfig = {// UI Config options};
ui.start("#firebaseui-auth-container", uiConfig);
return (
<div class="z-10 flex flex-col items-center justify-center">
<div class="w-screen max-w-xs">
<div id="firebaseui-auth-container" />
Actual Behaviour
Browser error on render
Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'. TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.
at useClientEffectQrl (http://127.0.0.1:5173/node_modules/@builder.io/qwik/core.mjs?v=498fe5d2:3382:23)
at Login_component_FYibw9YFqrU (http://127.0.0.1:5173/src/login_component_fyibw9yfqru.js?t=1660286532256:10:5)
Additional Information
No response
[0.0.100] SPA routing where both current and navigated route have use-client-effect results in error
#1079