Hot Reload not working when modifying components imported in the email files (when using path aliases)

[NickTiut]

Describe the Bug

I have the following file structure:

react-email-bug/
┣ emails/
┃ ┣ _components/
┃ ┃ ┣ footer.tsx
┃ ┃ ┣ layout.tsx
┃ ┗ generic.tsx
┣ node_modules/
┣ package-lock.json
┣ package.json
┗ readme.md

When I modify anything in footer.tsx (or layout.tsx), the dev server outputs ✔ Successfully rendered footer.tsx in 236ms but does not re-render generic.tsx that imports both of those components.

Which package is affected (leave empty if unsure)

react-email

Link to the code that reproduces this issue

https://github.com/NickTiut/react-email-bug

To Reproduce

Run npm run dev on the example provided. Modify anything in the _components/layout.tsx or _components/footer.tsx files. Web client does not update. If you restart the dev server, the changes are picked up.

Expected Behavior

Any change to the components should be reflected instantly on the web client.

What's your node version? (if relevant)

20.4.0

[gabrielmfern]

We do support hot reloading for changing files imported into an email template, but we don't support TypeScript's path aliases, that seems to be the issue in your case.

[NickTiut]

@gabrielmfern Thanks for the clarification. Will it be supported in the future? I'm sure path aliases are widely used.