Incompatibility with react-icons (maybe other packages?)

[theDanielJLewis]

• Component or Package Name: react-icons
• Component or Package Version: 4.12.0
• @jsxp-email/cli Version?: 1.7.2
• Operating System (or Browser): CLI
• Node Version: v21.4.0
• Reproduction:

1. Install react-icons
2. Generate generic email template
3. Add import { BiCalendar } from "react-icons/bi"; (or probably any icon from any set).
4. 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/jsx-email@1.7.2_@types+node@20.8.2_@types+react-dom@18.2.7_@types+react@18.2.21_react@18.2.0_ts-node@10.9.2/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/jsx-email@1.7.2_@types+node@20.8.2_@types+react-dom@18.2.7_@types+react@18.2.21_react@18.2.0_ts-node@10.9.2/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.

[theDanielJLewis]

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.

[shellscape]

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.