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.

[Charioteer]

Hot Reloading also does not work for subpath imports such as, for example:

import Button from '#common/emails/_components/Button.js'

[EmericW]

Similar to what @Charioteer said. Hot reloading doesn't seem to work for ESM/Typescript projects in general. Specifically when importing paths like: import { Button } from './components/button.component.js' Or: import { Button } from './components/button.component.jsx' While the filename is: button.component.tsx

[smallbellows]

I came across a similar issue. If I imported my component like import { Cmp } from './_components/cmp.tsx' , hot reloading wouldn't work and I'd get an error in my dev console

⨯ [TypeError: Cannot read properties of undefined (reading 'PreviewProps')] {
  digest: '1844140163'
  ⠼ Rendering email template cmp.tsx

At which point it would just hang, but if I restarted the dev server then all would be fine.

I've now switched to the default export from my component file, so I import like import Cmp from from './_components/cmp.tsx'. Hot reloading now works. There's still an error in the logs but doesn't impede functionality as far as I can tell.

✖ Failed while rendering cmp.tsx
  ✔ Successfully rendered SampleEmail.tsx in 335ms

[derekaug]

I was seeing a similar issue as @smallbellows. As long as I export a default from each of my components, I no longer get that error and hot module reloading appears to work with one caveat.

the CLI shows that it failed to when rendering my child component but then shows the re-render of the full template working as expected.

 ✖ Failed while rendering AgentInfo.tsx
 ✔ Successfully rendered market-report.tsx in 242ms

relevant package versions

{
  "@react-email/components": "0.0.35",
  "react-email": "4.0.3",
  "react": "18.3.1",
  "react-dom": "18.3.1",
}

[jony89]

Same here. as a workaround just make sure all your files you import from have any export default

[a-gunderin]

I'm not sure if it's the same issue, but I’ve encountered the following problem: I have a file located at emails/transactional/activate-account.tsx. Hot reload doesn’t work when I make changes to activate-account.tsx in that path. However, if the file is placed directly in the emails folder, hot reload works as expected. I'm using export default in activate-account.tsx. UPDATE: I've encountered this issue only with the latest version of react-email. I'll create a repository with the bug and open a new issue later.

[LuanRoger]

The hot reload is not working in a monorepo (Turborepo) which the components are in another package in the repo.

EX:

src/
├── apps/
│   ├── email/ -> React Email app
│   └── ...
└── packages/
    ├── templates/
    │   ├── components/
    │   │   └── component.tsx
    │   ├── index.ts
    │   └── package.json
    └── ...

The component is imported as follows:

import { Component } from "@repo/templates";

I've tried the default export/import, but seems not to be supported ether.

[gabrielmfern]

Can you all try this with [email protected]? It should have it fixed, and it works on my testing

[EmericW]

I can confirm my case is fixed. Thanks 🙏

[francescosalvi]

I'm not sure if it's the same issue, but I’ve encountered the following problem: I have a file located at emails/transactional/activate-account.tsx. Hot reload doesn’t work when I make changes to activate-account.tsx in that path. However, if the file is placed directly in the emails folder, hot reload works as expected. I'm using export default in activate-account.tsx. UPDATE: I've encountered this issue only with the latest version of react-email. I'll create a repository with the bug and open a new issue later.

@a-gunderin I tracked this myself at https://github.com/resend/react-email/issues/2242

[ayhanap]

I also just found this issue after facing similar issue of components not triggering the render. I am also using TypeScript's path aliases.

Canary build seems to have fixed the issue.

[gabrielmfern]

Seems like this has been fixed as of [email protected]