Failed to execute 'observe' on 'IntersectionObserver'

[oakmad]

Qwik Version

0.0.100

Operating System (or Browser)

osx

Node Version (if applicable)

No response

Which component is affected?

Qwik Runtime

Expected Behaviour

When trying to bind to a document element by ID I am getting an error:

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" />
      </div>
    </div>
  );
});

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

[nnelgxorz]

Hey @oakmad! Does adding eagerness: load help?

useClientEffect$(() => {
    //...  
}, { eagerness: 'load' }); 

[youngboy]

, { eagerness: 'load' }

@nnelgxorz still not work for my case. here is reproduction https://stackblitz.com/edit/github-7rtfy5?file=src/components/logo/logo.tsx ,

[nnelgxorz]

Dang. I was hoping there would be a workaround. 😆 Thanks for trying it out. 👍