react-email: ENOENT Error - no such file or directory, scandir in react-email package

Using react-email@1.9.3-canary.0 works for me, thanks for fixing.

Hey guys! I was facing the same issue, and something that helped was downgrading the version of react-email to @1.9.0.

npm i react-email@1.9.0 then run npm run dev again

edit: I tested version @1.9.4 and it also worked, so the error is related to version @1.9.3.

im using windows 11

Pretty poor first impression… @Julienh is right, upgrade to 1.9.4 and deleting the .react-email folder should get it working.

I’m on Windows 10.

Still happening with npx create-email@latest on windows 11

I have the same issue just after running npx create-email@latest in an empty directory (Windows 11)

The general preview gets fixed after downgrading the version. But when you try to access to the individual preview of the email it shows:

Server Error TypeError: Cannot read properties of null (reading ‘1’)

This error happened while generating the page. Any console logs will be displayed in the terminal window. Source src\app\preview[slug]\page.tsx (36:75) @ Page

34 | encoding: ‘utf-8’, 35 | });

36 | const importPath = exportTemplateFile.match(/import Mail from ‘(.+)’;/)![1]; | ^ 37 | const originalFilePath = pathJoin(dirname(path), importPath); 38 | 39 | const reactMarkup: string = await fs.readFile(originalFilePath, {

Environment: OS: Windows 11 Node: 18.16.0

How to find this issue:

I used the automatic setup

Solution

Why does this even happen in the first place?

The issue occurs because React-Email has trouble reading the file structure and fails to access files correctly. However, I have identified the problem and implemented the necessary fixes to address this issue.

Steps to Reproduce

1. Install all dependencies and run the development server.
2. Close the development server when you encounter an error.
3. Navigate to the .react-email folder in your file structure.
4. Locate the file .react-email/src/utils/get-email.ts.
5. Modify line 7 from:

   const emailsDirectory = path.join(process.cwd(), CONTENT_DIR);
   

   to:

   const emailsDirectory = path.join(__dirname, '..', '..', '..', '..', '..', '..', CONTENT_DIR);
   

6. Navigate to src/app/preview/[slug]/page.tsx
7. Update line 26 from:

const Email = (await import(`../../../../emails/${params.slug}`)).default;

to:

const Email = (await import(`../../../../../emails/${params.slug}`)).default;

1. Modify line 29 from:

const basePath = pathJoin(process.cwd(), CONTENT_DIR);

to:

const basePath = pathJoin(__dirname, '..', '..', '..', '..', '..', '..', CONTENT_DIR);

1. Comment out the following code block starting from line 35:

  const importPath = exportTemplateFile.match(/import Mail from '(.+)';/)![1];
const originalFilePath = pathJoin(dirname(path), importPath);

const reactMarkup: string = await fs.readFile(originalFilePath, {
 encoding: 'utf-8',
});

After making these changes, the issue should be resolved.

Please note that commenting out the code block in step 9 may result in an error where the Preview component in your JSX cannot find “reactMarkup”. To fix this, you can pass exportTemplateFile to the component.

it still happen on windows

I switched all my emails from react-email to jsx-email in around an hour and I’m having FAR less trouble, no issues stopping/starting and no need to be deleting folders and reinstalling all the time

Pretty poor first impression… @Julienh is right, upgrade to 1.9.4 and deleting the .react-email folder should get it working.

I’m on Windows 10.

Thank you. Finally got it worked. Follow the doc from https://react.email/docs/getting-started/automatic-setup never works.

I’m very disappointed with this package because I can’t make it preview work with any version. I’m on macOs Ventura 13.5 with NextJs 13.4.16 using the app folder inside the src folder.

About to use canary, this is also happening for me on main branch

Can we confirm this only happens on Windows?

For anybody that is still having issues: the npx create-email@latest command installs an old version of the react-email that have issues with windows.

If you run dev with it, it will create the folder and files at .react-email and break as everybody said before.

When you upgrade to 1.9.4 or greater, make sure to DELETE the folder. In my case, I deleted the folder content and not the folder itself because some process was using it. If that is your case, reboot and delete it before running the yarn dev command and it should work.

I have the same problem for a long time and get mad because there is no solution. not happy. I switch to server https://jsx.email/docs/quick-start#email-previews and use the same emails. Why doesn’t the react-email project matter for fixes?

v1.9.4 in package.json, deleting node_modules and react_email and running install again worked for me.

I’m facing the same issue with v1.9.5. I’m running a NextJS app with JavaScript on Windows 10.

The problem for me was that the ./emails folder did not get copied under .react-email folder even though the path was fine. But this occurred only with JavaScript. (Even after copying it manually there, further issues got triggered.)

I came around this problem by writing my email templates in TypeScript instead of JavaScript.

I upgraded to the 1.9.4 and had the same error.

I deleted the .react-email and node_modules folder and tried again, it is now working. Thank you.

Can we confirm this only happens on Windows?

In my case I’m using a MacBook

Can we confirm this only happens on Windows?

I’ve been using the library in a MAC, and everything works fine. I was until I tried to run the server/use the library on OS: Windows 11/ Windows 10 that the original issue posted here shows.