1

I am developing an app in Qwik with firebase auth and I am getting the following error:

Internal server error: Optimizer should replace all usages of $() with some special syntax. If you need to create a QRL manually, use inlinedQrl() instead.

    <button onClick$={() => 
      *signInWithEmailAndPassword*(auth, state.email, state.password)}
    >Login</button>
    <button 
     onClick$={*signInWithGoogle*}
    >Login with Google</button>

signInWithGoogle is a function I have implemented and signInWithEmailAndPassword is imported from firebase/auth.

Expecting to be compiled

greybeard
  • 2,249
  • 8
  • 30
  • 66
armgjoka
  • 11
  • 4

1 Answers1

1

I've come across this similarly working in Qwik.
How I've fixed the issue, which falls in hand with how the store/context management works in Qwik.

I imagine the code is like such:

export default component$(() => { 
    return (
        <>
        <button
      onClick$={() => *signInWithEmailAndPassword*(auth, state.email, state.password)}
         >Login
        </button>
        <button 
           onClick$={*signInWithGoogle*}
        >Login with Google</button>
        </>
    )
})

export default signInWithEmailAndPassword = $((auth, email, pw) => {
  // do sign in
})

I've found the change in thought is that the function needs to be inside the component. This way it has access to the state fields and then you can pass that to the separate exported function.

IMO it's not the prettiest way, but it's how Qwik wants it i.e.

export default component$(() => {
    
    const signInLocal = $(() => {
       return signInExport(auth, state.email, state.pw)
    })

    return (
        <>
        <button
          onClick$={signInLocal}
         >Login
        </button>
        <button 
           onClick$={*signInWithGoogle*}
        >Login with Google</button>
        </>
    )
})

export default signInExport= $((auth, email, pw) => {
  // do sign in
})
greybeard
  • 2,249
  • 8
  • 30
  • 66
Bozzeo
  • 21
  • 3