node.jsreactjsreact-hookslazy-loadingqwik

Qwik useState Error with Supabase Auth Component


I know there's not a lot of Qwik content on here, but I was wondering if anyone who fundamentally understands component rendering can help me with my question. I am trying to place a Supabase Auth UI into my component$ function like this:

import { component$ } from "@builder.io/qwik";

import { createClient } from "@supabase/supabase-js";
import { Auth } from '@supabase/auth-ui-react'

const supabase = createClient(`my-url`, `my-key`)

export default component$(() => {
    return (
        <Auth supabaseClient={supabase} />
    );
})

which produces this error:

Internal server error: Cannot read properties of null (reading 'useState')
  File: /dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:1461:26
      at useState (C:\Users\isaac\Downloads\VS Code\planner\node_modules\react\cjs\react.development.js:1622:21)
      at k (file:///C:/Users/isaac/Downloads/VS%20Code/planner/node_modules/@supabase/auth-ui-react/dist/index.es.js:1211:48)
      at invoke (../../../dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:1461:26)
      at renderNode (../../../dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:4129:17)
      at processData$1 (../../../dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:4143:16)
      at ../../../dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:4210:26
      at Array.reduce (<anonymous>)
      at walkChildren (../../../dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:4195:21)
      at renderNodeVirtual (../../../dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:3688:21)
      at renderNode (../../../dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:4120:16) (x2)

Does this have to do with lazy-loading and useState being weird at the time of this component rendering?


Solution

  • you can't use React component without wrapping it with qwikify$()

    Here is a qwik supabase auth working example