Unable to view preview

[iampapagray]

Describe the Bug

I have a NextJs project and i want to integrate react-email. Thus, i use the Manual Setup option in the docs from step 2 to the end. Because i already have a script with dev, i use email: email dev --dir src/emails in the package.json script.

When i open the preview page on localhost:3001 and navigate to the only email i added from the docs, i get this error:

Error: Build failed with 4 errors: emails/my-email.tsx:1:29: ERROR: Could not resolve "@react-email/components" emails/my-email.tsx:7:6: ERROR: Could not resolve "react/jsx-runtime" emails/my-email.tsx:17:33: ERROR: [plugin: rendering-utilities-exporter] Failed trying to importrenderfrom either@react-email/renderor@react-email/componentsto be able to render your email template. Maybe you don't have either of them installed? emails/my-email.tsx:18:72: ERROR: Could not resolve "react"

Even after reinstalling the libraries it still doesnt work.
I also tried the manual setup from scratch, exactly as it is in the docs and i get the same problem.

Here are my env details:
MacOs 15.1.1
M3 Pro Chip
Node v21.6.2
NPM 10.2.4
bun 1.0.26

Which package is affected (leave empty if unsure)

No response

Link to the code that reproduces this issue

none

To Reproduce

simply follow steps here: https://react.email/docs/getting-started/manual-setup

Expected Behavior

Preview for selected email should be displayed without a hustle.

What's your node version? (if relevant)

21.6.2

[mjacquin]

Same issue here 😞
Any advices ?

[iampapagray]

@mjacquin Nothing so far. I'm stuck

[gabrielmfern]

Many of the times I saw this error, while having all the packages installed, it was always because of an unwanted .pnp.cjs file at some place higher up from the project. Try looking up from the project, one directory at a time, while looking for a .pnp.cjs if there is one, delete it.

[haase1020]

Many of the times I saw this error, while having all the packages installed, it was always because of an unwanted .pnp.cjs file at some place higher up from the project. Try looking up from the project, one directory at a time, while looking for a .pnp.cjs if there is one, delete it.

This did the trick for me. Thank you @gabrielmfern!

[gabrielmfern]

Everyone go for my fix above, if your case is not the one I mentioned, share a minimal reproduction, and I'll check it out.

[mjacquin]

Many of the times I saw this error, while having all the packages installed, it was always because of an unwanted .pnp.cjs file at some place higher up from the project. Try looking up from the project, one directory at a time, while looking for a .pnp.cjs if there is one, delete it.

Worked for me !
The .pnp.cjs file was in my home directory.

Thanks @gabrielmfern

[iampapagray]

@gabrielmfern Sorry about the delayed feedback. I can't find this file you mentioned in my project. I've searched both manually and with IDE and system search but nothing came up.

[gabrielmfern]

@iampapagray not 100% sure all kinds of system search will find it, do it as I mentioned, and you're probably going to find it. Your IDE is also not going to detect it, since it's most likely in a directory higher up from your project, as I mentioned.

But still, if you're in doubt of whether this is the cause or not, you can just test the same project on another machine. If the SAME error persists, then we can be sure it isn't caused by the .pnp.cjs file.