@react-email/render does not support dynamic import in next js

[laubonghaudoi]

Describe the Bug

I tried to dynamically import the render function from @react-email/render package with the codes below in NextJS 13.2:

import dynamic from "next/dynamic";

const render = dynamic(() =>
  import("@react-email/render").then((mod) => mod.render)
);

However, I got errors like this

Argument of type '() => Promise<(component: ReactElement<any, string | JSXElementConstructor<any>>, options?: Options | undefined) => string>' is not assignable to parameter of type 'DynamicOptions<ReactElement<any, string | JSXElementConstructor<any>>> | Loader<ReactElement<any, string | JSXElementConstructor<any>>>'.
  Type '() => Promise<(component: ReactElement<any, string | JSXElementConstructor<any>>, options?: Options | undefined) => string>' is not assignable to type '() => LoaderComponent<ReactElement<any, string | JSXElementConstructor<any>>>'.
    Type 'Promise<(component: ReactElement<any, string | JSXElementConstructor<any>>, options?: Options | undefined) => string>' is not assignable to type 'LoaderComponent<ReactElement<any, string | JSXElementConstructor<any>>>'.
      Type '(component: ReactElement<any, string | JSXElementConstructor<any>>, options?: Options | undefined) => string' is not assignable to type 'ComponentType<ReactElement<any, string | JSXElementConstructor<any>>> | ComponentModule<ReactElement<any, string | JSXElementConstructor<any>>>'.
        Type '(component: ReactElement<any, string | JSXElementConstructor<any>>, options?: Options | undefined) => string' is not assignable to type 'FunctionComponent<ReactElement<any, string | JSXElementConstructor<any>>>'.
          Type 'string' is not assignable to type 'ReactElement<any, any>'.ts(2345)
(alias) const render: (component: React.ReactElement, options?: Options) => string
export render

Which package is affected (leave empty if unsure)

@react-email/render

Link to the code that reproduces this issue

see below

To Reproduce

In a next js 13 project, use the codes below to dynamically import the render function.

import dynamic from "next/dynamic";

const render = dynamic(() =>
  import("@react-email/render").then((mod) => mod.render)
);

Expected Behavior

Render function should be imported with no error.

What's your node version? (if relevant)

No response

[mkreuzmayr]

What is you use-case, why do you need to dynamically import the render function on the client? I'm just curious.

[laubonghaudoi]

Because I spotted that the @react-email package, especially the @react-email/render package is the largest part in my packaged bundle, as I described in #618 .

It is slowing down my app so much, that my app has a >2000ms Total Blocking Time. And the bundle analyzer shows that the largest part of unused javascript in my static codes is from @react-email, as you can see from the large box of js-beautify/js, which is one of the dependencies of @react-email/render, and @react-email/render/dist. That's why I want to dynamically import react-email to reduce the bundle size. This would significantly optimize my app.

[mkreuzmayr]

dynamic is only suited for components. For what you want to accomplish you need to use need to import().

Here is a simplified example.

export default function Page() {
  return (
    <button
      onClick={async () => {
        const { render } = await import('@react-email/render');
        // Render function is available here...
      }}
    >
      Click Me!
    </button>
  );
}

[EyMaddis]

I think the initial question still stands. What is your use case?
Why should a email library be accessible in a client bundle at all? This is something that belongs on the server alone otherwise you might have a security problem (if you allow sending client generated HTML via mail)

[laubonghaudoi]

Thank you @mkreuzmayr! I will use this in my code and see if it will reduce the static bundle size.

Hi @EyMaddis, my use case is that, I need to dynamically generate an email based on the user input. It's like, whenever a user submit a form, generate a copy of email based on the submitted content. But actually I don't know why the email library is bundled in the client and neither did I want to. I am using next js 13 with the /pages path. Is there any way to put it server-only?

Edit: I later figured out a way, which is simply not using render function at all and only keep the raw html string. But I don't know if this is the best practice.

[EyMaddis]

@laubonghaudoi from my understanding it should be removed if you are only using any react email imported functions in something like getServerSideProps, but I think you should put everything in an api route and not have any other imports to react-email anywhere else

[laubonghaudoi]

I see, thanks for the advise! Yeah I didn't make it as an api route, in that way the rendering will be server-side only.