fix(react-email): Absolute paths when trying to click emails on sub directories in the Sidebar

[gabrielmfern]

What is the issue?

When running the Next app we do a few path transformations by hand, as they run in the browser, and
browsers doesn't provide us with something like a path module. This means that we do stuff like making a path
relative to another by doing replacements.

Here's an example of making a path relative and of where the issue starts:

react-email/packages/react-email/src/components/sidebar/sidebar-directory.tsx

Lines 31 to 35 in 2e16a60

	const directoryPathRelativeToBaseEmailsDirectory =
	directoryMetadata.absolutePath
	.replace(`${emailsDirectoryAbsolutePath}${pathSeparator}`, '')
	.replace(emailsDirectoryAbsolutePath, '')
	.trim();

This path replacement would fail because this absolute path is determined based on the user's project location:

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

Lines 30 to 34 in 2e16a60

	};
	export const emailsDirectoryAbsolutePath = `${
	process.env.NEXT_PUBLIC_USER_PROJECT_LOCATION
	}${pathSeparator}${normalizePath(emailsDirRelativePath)}`;

And since this path is being passed in without modifications to the Next app, through environment variables,
what happens is that the emailsDirectoryAbsolutePath becomes something like D:\email-server\src/emails
which does not work when replacing as the paths, that come from the server action to get all the email templates metadata,
will start with D:\email-server\src\emails.

This is the same as #1354.

How does this fix the issue?

Before passing in the environment variable for the relative path to the user's emails directory, we run a path.normalize
on it which ensures that the forward slashes are converted to backward slashes meaning the issues goes away.

This changes both on the build command and on the dev command since them both can be affected by this:

react-email/packages/react-email/src/cli/utils/preview/start-dev-server.ts

Lines 116 to 126 in 2e16a60

	// these environment variables are used on the next app
	// this is the most reliable way of communicating these paths through
	process.env = {
	...process.env,
	...getEnvVariablesForPreviewApp(
	// If we don't do normalization here, stuff like https://github.com/resend/react-email/issues/1354 happens.
	path.normalize(emailsDirRelativePath),
	cliPacakgeLocation,
	process.cwd(),
	),
	};

react-email/packages/react-email/src/cli/commands/build.ts

Lines 51 to 59 in 2e16a60

	const envVariables = {
	...getEnvVariablesForPreviewApp(
	// If we don't do normalization here, stuff like https://github.com/resend/react-email/issues/1354 happens.
	path.normalize(emailsDirRelativePath),
	'PLACEHOLDER',
	'PLACEHOLDER',
	),
	NEXT_PUBLIC_IS_BUILDING: 'true',
	};

How can I make sure this is fixed?

You can, on Windows, do the following:

1. Comment out the first line in the following file:
   

   react-email/packages/render/src/index.ts

   Lines 1 to 4 in 2e16a60

   	export * from "./render";
   	export * from "./render-async";
   	export * from "./options";

   • This is necessary because of a bug we currently have with render on NextJS 14 which can only be avoided locally by doing this
2. Running turbo build inside ./packages/react-email to build all the dependencies it has
3. Move the directory ./apps/demo/emails to ./apps/demo/src/emails
4. Run npx tsx ../../packages/react-email/src/cli/index.ts dev -d ./src/emails
5. Open http://localhost:3000
6. Hover some email file on the sidebar, that is inside a sub directory, and ensure all the links are proper

I've also tested this on a Windows machine of mine and can confirm this works.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
react-email	✅ Ready (Inspect)	Visit Preview	Mar 13, 2024 4:52pm
react-email-demo	✅ Ready (Inspect)	Visit Preview	Mar 13, 2024 4:52pm