If possible, how to use MUI with Qwik framework?

Question

I try Qwik framework which looks a lot like Reactjs and uses jsx. And suddenly, I wonder if Reactjs libraries such as MUI can work with Qwik framework.

I tried this code:

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;

But I got this this error:

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

Geezer

Answer 1

JSX in this case is the templating language of Qwik but the underlyings are different. It is made similar so you have an easier transition from react as stated in their docs.

Qwik is familiar for React developers and can be used to build any type of web site or application.

Qwik offers some adapter for react components you need to install and wrap your components in.

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

And then the usage should look like the 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>
    </>
  );
});

Trichloromethane

Not work. I got new error i.imgur.com/eqJGAOC.png – Geezer

@builder.io/qwik-react has the following peer dependencies that need to be installed. npm i -D @builder.io/qwik @emotion/react @emotion/server @emotion/styled @types/react @types/react-dom react react-dom But you should have a warning when installing it, that you need to install the missing peer dependencies. – Trichloromethane

Now I have this error i.imgur.com/YGDoV9L.png – Geezer

Answer 2

This thread is a bit older but maybe someone stumbles across it like me. I had the same issue using a UI-component library and resolved it with the following steps.

• adding qwikReact into the vite.config file:

  import { defineConfig } from "vite";
  import { qwikVite } from "@builder.io/qwik/optimizer";
  import { qwikCity } from "@builder.io/qwik-city/vite";
  import { qwikReact } from "@builder.io/qwik-react";
  import tsconfigPaths from "vite-tsconfig-paths";

  export default defineConfig(() => { return { plugins: [qwikCity(), qwikVite(), qwikReact(), tsconfigPaths()], preview: { headers: { "Cache-Control": "public, max-age=600", }, }, }; });

• qwikify() must be used in a seperate file only with /** @jsxImportSource react */ as Jonathan pointed out.

Be aware that react components will not be treated the same way in Qwik. As stated in the docs it should be a migration/testing tool for existing projects where react components should be introduced in "Wide islands".

Wellwisher

Answer 3

For those of you who are using Qwik Speak for I18N, the proposed solution will not work as is because Qwik-Speak won't be able to handle the JSX. The solution is to individually wrap the MUI component and then use it normally as so:

import { component$ } from "@builder.io/qwik";
import { Link } from "@builder.io/qwik-city";
import { $translate as t, Speak } from "qwik-speak";
import Button from "@mui/material/Button";
import { qwikify$ } from "@builder.io/qwik-react";

export const MUIButton = qwikify$(Button);

export default component$(() => {
  return (
    <Speak assets={["welcome"]}>
      <div>
        <h1>{t("welcome.title@@Welcome")}</h1>
        <MUIButton variant="contained">Do Something</MUIButton>
      </div>
    </Speak>
  );
})

Calabash