如何在Qwik框架中使用MUI？遇JSXNode类型错误求助

错误原因 #

MUI组件是基于React开发的，自带React特有的标识（比如Symbol(react.memo)、Symbol(react.forward_ref)），而Qwik的JSX渲染机制要求节点类型必须是函数或字符串，无法直接识别React专属的组件类型，因此抛出Code(25): Invalid JSXNode type错误。

解决方案 #

使用Qwik官方提供的React适配器@builder.io/qwik-react，将React组件转换为Qwik可识别的组件：

1. 安装依赖 #

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

2. 修改组件代码 #

用reactify$工具包裹MUI的React组件，转换为Qwik兼容组件：

import { component$ } from "@builder.io/qwik";
import { reactify$ } from "@builder.io/qwik-react";
import Add from "@mui/icons-material/Add";
import IconButton from "@mui/material/IconButton";

// 转换MUI的React组件为Qwik组件
const QwikIconButton = reactify$(IconButton);
const QwikAddIcon = reactify$(Add);

const AddToCartButton = component$(() => {
  return (
    <QwikIconButton>
      <QwikAddIcon />
    </QwikIconButton>
  );
});

export default AddToCartButton;

原理说明 #

reactify$会创建一个Qwik组件包装器，在Qwik和React之间搭建兼容层，处理两者的生命周期、状态更新逻辑差异，让React生态的UI库（如MUI）能在Qwik项目中正常渲染和交互。

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