如果可能，如何将 MUI 与 Qwik 框架一起使用？

Question

我尝试了 Qwik 框架，它看起来很像 Reactjs 并使用 jsx。突然间，我想知道 MUI 等 Reactjs 库是否可以与 Qwik 框架一起使用。

我试过这段代码：

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

const AddToCartButton = component$(() => {
  return (
    <IconButton>
      <Add />
    </IconButton>
  );
});

export default AddToCartButton;

但是我得到了这个错误：

QWIK ERROR Code(25): Invalid JSXNode type. It must be either a function or a string. Found: {
  '$$typeof': Symbol(react.memo),
  type: {
    '$$typeof': Symbol(react.forward_ref),
    render: [Function: Component] { displayName: 'AddIcon', muiName: 'SvgIcon' }
  },
  compare: null
} Error: Code(25): Invalid JSXNode type. It must be either a function or a string. Found:
    at logError (E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:4515:58)
    at logErrorAndStop (E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:4521:21)
    at qError (E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:4585:16)
    at Proxy.jsx (E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:605:23)
    at AddToCartButton_component_4S0nJgnxzBU (/src/addtocartbutton_component_4s0njgnxzbu.js:11:55)
    at useInvoke (E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:149:30)
    at E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:4676:32
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async renderSSR (E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:5280:9)
    at async Proxy.renderToStream (E:\qwik\flower\node_modules\@builder.io\qwik\server.cjs:582:3)
    at async file:///E:/qwik/flower/node_modules/@builder.io/qwik/optimizer.mjs:1776:30
QWIK ERROR Code(25): Invalid JSXNode type. It must be either a function or a string. Found: Error: Code(25): Invalid JSXNode type. It must be either a function or a string. Found:
    at logError (E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:4515:58)
    at logErrorAndStop (E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:4521:21)
    at qError (E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:4585:16)
    at Proxy.jsx (E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:605:23)
    at AddToCartButton_component_4S0nJgnxzBU (/src/addtocartbutton_component_4s0njgnxzbu.js:11:55)
    at useInvoke (E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:149:30)
    at E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:4676:32
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async renderSSR (E:\qwik\flower\node_modules\@builder.io\qwik\core.cjs:5280:9)
    at async Proxy.renderToStream (E:\qwik\flower\node_modules\@builder.io\qwik\server.cjs:582:3)
    at async file:///E:/qwik/flower/node_modules/@builder.io/qwik/optimizer.mjs:1776:30
not rendered

Answer 1

JSX 在这种情况下是 Qwik 的模板语言，但底层是不同的。它变得相似，因此您可以更轻松地从他们的 docs 中所述的反应过渡。

Qwik 为 React 开发人员所熟悉，可用于构建任何类型的网站或应用程序。

Qwik 为您需要安装和包装组件的 React 组件提供了一些适配器。

npm i -D @builder.io/qwik-react

然后用法应该类似于example in their repo。

/** @jsxImportSource react */

import { qwikify$ } from '@builder.io/qwik-react';
import { Button } from '@mui/material';

export const App = qwikify$(() => {
  return (
    <>
      <Button variant="contained">Hola</Button>
    </>
  );
});

Answer 2

这个线程有点旧，但也许有人像我一样偶然发现它。 我在使用 UI 组件库时遇到了同样的问题，并通过以下步骤解决了它。

• 在 vite.config 文件中添加 qwikReact：

  从“vite”导入{defineConfig}；
  从“@builder.io/qwik/optimizer”导入{qwikVite}；
  从“@builder.io/qwik-city/vite”导入{qwikCity}；
  从“@builder.io/qwik-react”导入{qwikReact}；
  从“vite-tsconfig-paths”导入 tsconfigPaths；

  导出默认 defineConfig(()​​ => { 返回 { 插件：[qwikCity(), qwikVite(),qwikReact(), tsconfig 路径 ()], 预习： { 标题：{ "Cache-Control": "public, max-age=600", }, }, }; });

• qwikify() 必须在单独的文件中使用只要与/** @jsxImportSource react */as Jonathan pointed out。

请注意，React 组件在 Qwik 中的处理方式不同。正如 docs 中所述，它应该是现有项目的迁移/测试工具，其中应在“Wide islands”中引入 React 组件。