I'm trying to use Material UI icons inside my Qwik website.
I used the answers of If possible, how to use MUI with Qwik framework? and here's my Icons.jsx file:
/** @jsxImportSource react */
import { qwikify$ } from '@builder.io/qwik-react'
import AcUnitIcon from '@mui/icons-material/AcUnit'
import MenuIcon from '@mui/icons-material/Menu'
import AddIcon from '@mui/icons-material/Add'
import RemoveIcon from '@mui/icons-material/Remove'
import DriveFileRenameOutlineOutlinedIcon from '@mui/icons-material/DriveFileRenameOutlineOutlined'
export const MuiAcUnitIcon = qwikify$(() => <AcUnitIcon />)
export const MuiMenuIcon = qwikify$(() => <MenuIcon />)
export const MuiDriveFileRenameOutlineOutlinedIcon = qwikify$(() => <DriveFileRenameOutlineOutlinedIcon className='text-white' />)
export const MuiAddIcon = qwikify$(({ sx, className }) => <AddIcon sx={sx} className={className} />)
export const MuiRemoveIcon = qwikify$(({ sx, className }) => <RemoveIcon sx={sx} className={className} />);
Everything works great in the development. But when I want to build the app for the production environment using npm run build or npm run preview, I get this error:
The JSX import source cannot be set without also enabling React's "automatic" JSX transform
And every component that has used the MUI icon would render as a blank space on my website.
I also tried How to fix vite warning: The JSX import source cannot be set?, but it made no difference.
Here's the issue that we wrote for the Qwik team. And here's a reproducable repository.
What should we do to fix this?
