shellscape
Incompatibility with react-icons (maybe other packages?)
- Component or Package Name: react-icons
- Component or Package Version: 4.12.0
@jsxp-email/cliVersion?: 1.7.2- Operating System (or Browser): CLI
- Node Version: v21.4.0
- Reproduction:
- Install react-icons
- Generate generic email template
- Add
import { BiCalendar } from "react-icons/bi";(or probably any icon from any set). - In the email body, add
<BiCalendar />(or whatever icon is being imported).
Expected Behavior
Expected to build and preview, including the SVG icon, without errors.
Actual Behavior
On build, this will return the following fatal error:
file:///…/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/jsx-email/src/render/jsx-to-string.ts:246
throw new Error(`Unsupported JSX element type: ${String(type)}`);
^
Error: Unsupported JSX element type: [object Object]
at jsxToString (file:///…/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/jsx-email/src/render/jsx-to-string.ts:246:11)
That last line repeats with different line numbers.
This error also shows in the browser console (but not the CLI console) when attempting to load the email preview app.
Additional Information
As discussed in Discord on January 9, 2024.
This might be a moot point because, as I was reminded on Discord, most email clients still don't support SVG images, so it's actually not a good idea to use React Icons.
Thus, I've updated my code so that it doesn't include any SVG icons anymore, and the email templates build and render properly now.
OK that's good to know. I'd still like to triage this so we have guidance. And, if someone should want to target only an email client that supports SVG, we'd be in good shape for that.
We've had a lot of improvements in the next release (https://github.com/shellscape/jsx-email/issues/203) and will close this one. SVG still isn't supported by most email clients. If anyone runs into another Unsupported JSX element type error, please feel free to ping on this issue or open a new one.