Import png attachments as binary using esbuild

[rt-joe]

Hello, big fan of react-email! Thanks for all you do.

We load some png files as binary to load as attachments, example:

interface Attachment {
  filename: string;
  content: Buffer;
  cid: string;
}
import myImage from "./my-image.png";
export const myImageAttachment: Attachment = {
  filename: "my-image.png",
  content: myImage,
  cid: "myimage",
};

We use esbuild to bundle, and add the following config in order to load the files as binary

    loader: {
      ".png": "binary",
    },

When trying to run dev server with email dev we get the error src/attachments/index.ts:2:22: ERROR: No loader is configured for ".png" files: src/attachments/my-image.png

Is there any workaround for this? Or is there a way to set options for the esbuild command used under the hood by react-email cli?

This comment thread has similar question: #1403 (reply in thread). I think reading the file using node would work for dev env but then I would have to dynamically swap out which attachments I'm referencing based on whether I'm running local dev server or not. Curious what other options there may be. Thanks!

[itsyoboieltr]

I wanted to load translation (.po) files, and I got the same error.

[rt-joe]

I ended up using esbuild to "pre-bundle" the images into binary and export them in a generated .ts file. Then wherever they're referenced it imports from the generated file instead of the .png files.
It's sort of hacky and required some other changes I needed to do when referencing the images using react-email email dev versus as attachments in the actual email. But it at least allows me to use the dev server and iterate quicker on emails.

[gabrielmfern]

I simpathze with the idea of the preview server being configurable somehow, but I'm not sure how we can interface this in a way that doesn't feel annoying to users, like having a configuration of our own just for this. There's some other use cases for this sort of configuration too, like getting environment variables from inside the preview

[maelp]

I'm not clear on the Image component behavior in React-email? does it auto-inline images as inline attachments? or are we supposed to host the images somewhere (and how do we configure the base url?)