Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings
Discussion options

rt-joe
Apr 22, 2025

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!
You must be logged in to vote

Replies: 4 comments

Comment options

itsyoboieltr
Jul 6, 2025

I wanted to load translation (.po) files, and I got the same error.
You must be logged in to vote
0 replies
Comment options

rt-joe
Aug 5, 2025
Author

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.
You must be logged in to vote
0 replies
Comment options

gabrielmfern
Aug 5, 2025
Maintainer

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
You must be logged in to vote
0 replies
Comment options

maelp
Aug 13, 2025

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?)
You must be logged in to vote
0 replies
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
🙏
Q&A
Labels
None yet
4 participants
@rt-joe @maelp @itsyoboieltr @gabrielmfern
Morty Proxy This is a proxified and sanitized view of the page, visit original site.