在Qwik组件中使用Supabase Auth UI出现useState错误求助

我对Qwik相关内容了解不多，现在想找熟悉组件渲染原理的人帮忙。我尝试在Qwik的component$函数中引入Supabase Auth UI组件，代码如下：

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

运行时出现内部服务器错误：

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)

请问该问题是否与懒加载以及组件渲染时useState的异常表现有关？

问题原因与解决方案 #

原因 #

@supabase/auth-ui-react是React专属组件库，Qwik的组件渲染机制和React完全独立——Qwik没有React的上下文环境，直接在Qwik的component$里渲染React组件，会导致React的useState这类Hook找不到对应的React上下文，从而触发报错。这个问题和懒加载无关，本质是跨框架组件直接混用的兼容性问题。

解决方案 #

要在Qwik中使用React组件，需要借助Qwik提供的React兼容层，步骤如下：

1. 安装Qwik的React适配器依赖：

npm install @builder.io/qwik-react react-dom

2. 修改代码，用reactify$将React的Auth组件转换为Qwik可识别的组件：

import { component$ } from "@builder.io/qwik";
import { reactify$ } from "@builder.io/qwik-react";
import { createClient } from "@supabase/supabase-js";
import { Auth } from '@supabase/auth-ui-react'

// 将React组件转为Qwik兼容组件
const QwikAuth = reactify$(Auth);

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

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

reactify$会为React组件创建必要的React上下文环境，确保useState等Hook能正常工作，从而解决报错问题。

内容的提问来源于stack exchange，提问作者itsisaac19