Could not resolve "react/jsx-runtime" in example automatic setup

tcatic commented 3 weeks ago

Describe the Bug

We (our team) have been playing around with react-email and trying to make it work locally with the automatic setup (in an empty repository). We have followed the steps in the docs and we still can't make it work. We would get the two errors:

Could not resolve "react/jsx-runtime" and Could not resolve "react". The second one we managed to fix by changing the imports from import React from 'react'; to import * as React from 'react';.

Can somebody help us debug the issue and get to the bottom of it? We ran our code in the cloud and an Ubuntu VM and it worked completely fine.

These are the logs from our attempt to integrate it in our codebase but the same errors happen in a clean environment following the docs:

Error: Build failed with 15 errors:
src/notification/emails/ConfirmedOrderInGroup.tsx:18:6: ERROR: Could not resolve "react/jsx-runtime"
src/notification/emails/components/cards/card.tsx:43:4: ERROR: Could not resolve "react/jsx-runtime"
src/notification/emails/components/cards/journeyCard/journeyCard.tsx:29:8: ERROR: Could not resolve "react/jsx-runtime"
src/notification/emails/components/common/layout.tsx:3:26: ERROR: Could not resolve "@react-email/components"
src/notification/emails/components/common/layout.tsx:81:4: ERROR: Could not resolve "react/jsx-runtime"
...
    at failureErrorWithLog (/Users/tcatic/app/api/node_modules/react-email/node_modules/esbuild/lib/main.js:1651:15)
    at /Users/tcatic/app/api/node_modules/react-email/node_modules/esbuild/lib/main.js:1059:25
    at /Users/tcatic/app/api/node_modules/react-email/node_modules/esbuild/lib/main.js:1004:52
    at buildResponseToResult (/Users/tcatic/app/api/node_modules/react-email/node_modules/esbuild/lib/main.js:1057:7)
    at /Users/tcatic/app/api/node_modules/react-email/node_modules/esbuild/lib/main.js:1086:16
    at responseCallbacks.<computed> (/Users/tcatic/app/api/node_modules/react-email/node_modules/esbuild/lib/main.js:704:9)
    at handleIncomingPacket (/Users/tcatic/app/api/node_modules/react-email/node_modules/esbuild/lib/main.js:764:9)
    at Socket.readFromStdout (/Users/tcatic/app/api/node_modules/react-email/node_modules/esbuild/lib/main.js:680:7)
    at Socket.emit (node:events:518:28)
    at Socket.emit (node:domain:488:12)
    at addChunk (node:internal/streams/readable:559:12)
    at readableAddChunkPushByteMode (node:internal/streams/readable:510:3)
    at Readable.push (node:internal/streams/readable:390:5)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)
    at Pipe.callbackTrampoline (node:internal/async_hooks:130:17)

NPM version: 20.12.2 Yarn: 3.6.1. react-email: 2.1.1. OS: MacOs M1 & M2 machines

Which package is affected (leave empty if unsure)

No response

Link to the code that reproduces this issue

https://react.email/docs/getting-started/automatic-setup

To Reproduce

Followed the instructions in the docs and everything was broken

Expected Behavior

For everything to work 😄

What's your node version? (if relevant)

20.12.2

gabrielmfern commented 3 weeks ago

Are you by any means using yarn with pnp somewhere above that project? That might be the reason.

From our Discord, someone had this exact issue and fixed by deleting the pnp.cjs file

tcatic commented 3 weeks ago

Are you by any means using yarn with pnp somewhere above that project? That might be the reason.

From our Discord, someone had this exact issue and fixed by deleting the pnp.cjs file

That was it! I didn't use pnp (never actually have so I'm not sure where it came from), but I had .pnp.cjs .pnp.loader.mjs in my home directory. After deleting both it worked. Thank you very much for your help!

resend / react-email