fix(react-email): Hot reloading not working with custom emails directory (#1231)

Co-authored-by: Bu Kinoshita <[email protected]>

Author: gabrielmfern

packages/react-email/src/contexts/emails.tsx

@@ -6,7 +6,9 @@ import {
 } from '../actions/get-emails-directory-metadata';
 import { useHotreload } from '../hooks/use-hot-reload';
 import {
+  emailsDirRelativePath,
   emailsDirectoryAbsolutePath,
+  normalizePath,
   pathSeparator,
 } from '../utils/emails-directory-absolute-path';
 import {
@@ -70,11 +72,16 @@ export const EmailsProvider = (props: {
         });
 
       for (const change of changes) {
+        const normalizedEmailsDirRelativePath = normalizePath(
+          emailsDirRelativePath,
+        );
         const slugForChangedEmail =
           // filename ex: emails/apple-receipt.tsx
           // so we need to remove the "emails/" because it isn't used
           // on the slug parameter for the preview page
-          change.filename.split(pathSeparator).slice(1).join('/');
+          change.filename
+            .replace(`${normalizedEmailsDirRelativePath}${pathSeparator}`, '')
+            .replace(normalizedEmailsDirRelativePath, '');
 
         const lastResult = renderingResultPerEmailSlug[slugForChangedEmail];
 

packages/react-email/src/utils/emails-directory-absolute-path.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-const emailsDirRelativePath =
+export const emailsDirRelativePath =
   process.env.NEXT_PUBLIC_EMAILS_DIR_RELATIVE_PATH ?? 'emails';
 
 export const userProjectLocation =
@@ -11,7 +11,7 @@ export const pathSeparator = process.env.NEXT_PUBLIC_OS_PATH_SEPARATOR! as
   | '/'
   | '\\';
 
-const normalizePath = (path: string) => {
+export const normalizePath = (path: string) => {
   let newPath = path;
 
   while (newPath.startsWith('./')) {