resend / react-email

💌 Build and send emails using React
https://react.email
MIT License
13.97k stars 629 forks source link

Trying to follow repository development instructions results in error #1646

Closed paradoxloop closed 2 days ago

paradoxloop commented 2 weeks ago

Describe the Bug

Following the instructions in Development section of the main react-email repository results in errors during install and dev.

I have tried a number of work of way of getting it to work ( building the repository first, changing pnpm version etc) to no avail.

50/50 chance I am doing something wrong but it might be a bug with a clean run of the repository

Which package is affected (leave empty if unsure)

react-email

Link to the code that reproduces this issue

NA

To Reproduce

Follow the instructions in Development section of read me.

  1. Git clone the repository

  2. Run pnpm install (completes successsfully but has warnings)

     WARN  Failed to create bin at /Users/nico/Documents/projects/react-email-1/benchmarks/preview-server/node_modules/.bin/email. ENOENT: no such file or directory, open '/Users/nico/Documents/projects/react-email-1/benchmarks/preview-server/node_modules/react-email/dist/cli/index.js'
     WARN  3 other warnings
    Done in 12s
  3. run pnpm dev (fails to run)

> react-email-monorepo@0.0.0 dev /Users/nico/Documents/projects/react-email-1
> turbo run dev --filter=!react-email-starter --parallel --concurrency 25

• Packages in scope: @benchmarks/preview-server, @benchmarks/tailwind-component, @react-email/body, @react-email/button, @react-email/code-block, @react-email/code-inline, @react-email/column, @react-email/components, @react-email/container, @react-email/font, @react-email/head, @react-email/heading, @react-email/hr, @react-email/html, @react-email/img, @react-email/link, @react-email/markdown, @react-email/preview, @react-email/render, @react-email/row, @react-email/section, @react-email/tailwind, @react-email/text, create-email, demo, eslint-config-custom, react-email, tsconfig, web
• Running dev in 29 packages
• Remote caching disabled
@react-email/head:dev: cache bypass, force executing feaa11266ba18ece
@react-email/preview:dev: cache bypass, force executing 26db52c99668a62e
@react-email/hr:dev: cache bypass, force executing 13b6b1c0fb99cd83
@react-email/tailwind:dev: cache bypass, force executing 1c7cd8552b002410
@react-email/column:dev: cache bypass, force executing d56d5342080ef72c
@react-email/section:dev: cache bypass, force executing 19a8949405fdf2da
@react-email/html:dev: cache bypass, force executing 6464497956f157de
@react-email/heading:dev: cache bypass, force executing cffc372745dc93d9
@react-email/components:dev: cache bypass, force executing 89def180aa75dafa
@react-email/code-inline:dev: cache bypass, force executing 3bfef22b09c06cbf
react-email:dev: cache bypass, force executing ce2c16e427581521
@react-email/row:dev: cache bypass, force executing 3cb8c9508ddbe3a6
@react-email/link:dev: cache bypass, force executing 4f26947d691ec6c1
@react-email/text:dev: cache bypass, force executing 46fb44fe73225c67
@react-email/font:dev: cache bypass, force executing dee3a6302d3966b7
@react-email/code-block:dev: cache bypass, force executing d4322b776f523b5b
@react-email/render:dev: cache bypass, force executing 38c26eb4212a920f
@react-email/body:dev: cache bypass, force executing 6202e9397ce4a0b0
demo:dev: cache bypass, force executing ccc51a93629a3d63
@react-email/button:dev: cache bypass, force executing 8276a30de8a4695a
@react-email/container:dev: cache bypass, force executing 39d29053501ee619
web:dev: cache bypass, force executing d25f0d61af91266f
@react-email/markdown:dev: cache bypass, force executing 514e27001bea95dc
@react-email/img:dev: cache bypass, force executing da3b4c2a9a1e3882
@react-email/code-inline:dev: 
@react-email/code-inline:dev: > @react-email/code-inline@0.0.4 dev /Users/nico/Documents/projects/react-email-1/packages/code-inline
@react-email/code-inline:dev: > pnpm build --watch
@react-email/code-inline:dev: 
@react-email/head:dev: 
@react-email/head:dev: > @react-email/head@0.0.11 dev /Users/nico/Documents/projects/react-email-1/packages/head
@react-email/head:dev: > tsup src/index.ts --format esm,cjs --dts --external react --watch
@react-email/head:dev: 
@react-email/preview:dev: 
@react-email/preview:dev: > @react-email/preview@0.0.11 dev /Users/nico/Documents/projects/react-email-1/packages/preview
@react-email/preview:dev: > tsup src/index.ts --format esm,cjs --dts --external react --watch
@react-email/preview:dev: 
@react-email/html:dev: 
@react-email/html:dev: > @react-email/html@0.0.10 dev /Users/nico/Documents/projects/react-email-1/packages/html
@react-email/html:dev: > tsup src/index.ts --format esm,cjs --dts --external react --watch
@react-email/html:dev: 
@react-email/link:dev: 
@react-email/link:dev: > @react-email/link@0.0.10 dev /Users/nico/Documents/projects/react-email-1/packages/link
@react-email/link:dev: > tsup src/index.ts --format esm,cjs --dts --external react --watch
@react-email/link:dev: 
@react-email/row:dev: 
@react-email/row:dev: > @react-email/row@0.0.10 dev /Users/nico/Documents/projects/react-email-1/packages/row
@react-email/row:dev: > tsup src/index.ts --format esm,cjs --dts --external react --watch
@react-email/row:dev: 
@react-email/font:dev: 
@react-email/font:dev: > @react-email/font@0.0.8 dev /Users/nico/Documents/projects/react-email-1/packages/font
@react-email/font:dev: > tsup src/index.ts --format esm,cjs --dts --external react --watch
@react-email/font:dev: 
@react-email/section:dev: 
@react-email/section:dev: > @react-email/section@0.0.14 dev /Users/nico/Documents/projects/react-email-1/packages/section
@react-email/section:dev: > tsup src/index.ts --format esm,cjs --dts --external react --watch
@react-email/section:dev: 
@react-email/code-block:dev: 
@react-email/code-block:dev: > @react-email/code-block@0.0.8 dev /Users/nico/Documents/projects/react-email-1/packages/code-block
@react-email/code-block:dev: > tsup src/index.ts --format esm,cjs --dts --external react --watch
@react-email/code-block:dev: 
@react-email/components:dev: 
@react-email/components:dev: > @react-email/components@0.0.24 dev /Users/nico/Documents/projects/react-email-1/packages/components
@react-email/components:dev: > tsup src/index.ts --format esm,cjs --dts --external react --watch
@react-email/components:dev: 
@react-email/heading:dev: 
@react-email/heading:dev: > @react-email/heading@0.0.14 dev /Users/nico/Documents/projects/react-email-1/packages/heading
@react-email/heading:dev: > tsup src/index.ts --format esm,cjs --dts --external react --watch
@react-email/heading:dev: 
@react-email/container:dev: 
@react-email/container:dev: > @react-email/container@0.0.14 dev /Users/nico/Documents/projects/react-email-1/packages/container
@react-email/container:dev: > tsup src/index.ts --format esm,cjs --dts --external react --watch
@react-email/container:dev: 
react-email:dev: 
react-email:dev: > react-email@3.0.1 dev /Users/nico/Documents/projects/react-email-1/packages/react-email
react-email:dev: > tsup-node --watch
react-email:dev: 
@react-email/button:dev: 
@react-email/button:dev: > @react-email/button@0.0.17 dev /Users/nico/Documents/projects/react-email-1/packages/button
@react-email/button:dev: > tsup src/index.ts --format esm,cjs --dts --external react --watch
@react-email/button:dev: 
@react-email/tailwind:dev: 
@react-email/tailwind:dev: > @react-email/tailwind@0.1.0 dev /Users/nico/Documents/projects/react-email-1/packages/tailwind
@react-email/tailwind:dev: > vite build --watch
@react-email/tailwind:dev: 
@react-email/column:dev: 
@react-email/column:dev: > @react-email/column@0.0.12 dev /Users/nico/Documents/projects/react-email-1/packages/column
@react-email/column:dev: > tsup src/index.ts --format esm,cjs --dts --external react --watch
@react-email/column:dev: 
@react-email/hr:dev: 
@react-email/hr:dev: > @react-email/hr@0.0.10 dev /Users/nico/Documents/projects/react-email-1/packages/hr
@react-email/hr:dev: > tsup src/index.ts --format esm,cjs --dts --external react --watch
@react-email/hr:dev: 
@react-email/render:dev: 
@react-email/render:dev: > @react-email/render@1.0.1 dev /Users/nico/Documents/projects/react-email-1/packages/render
@react-email/render:dev: > tsup-node --watch
@react-email/render:dev: 
web:dev: 
web:dev: > web@0.0.0 dev /Users/nico/Documents/projects/react-email-1/apps/web
web:dev: > next dev
web:dev: 
@react-email/body:dev: 
@react-email/body:dev: > @react-email/body@0.0.10 dev /Users/nico/Documents/projects/react-email-1/packages/body
@react-email/body:dev: > tsup src/index.ts --format esm,cjs --dts --external react --watch
@react-email/body:dev: 
demo:dev: 
demo:dev: > demo@0.0.0 dev /Users/nico/Documents/projects/react-email-1/apps/demo
demo:dev: > email dev
demo:dev: 
@react-email/text:dev: 
@react-email/text:dev: > @react-email/text@0.0.10 dev /Users/nico/Documents/projects/react-email-1/packages/text
@react-email/text:dev: > tsup src/index.ts --format esm,cjs --dts --external react --watch
@react-email/text:dev: 
@react-email/markdown:dev: 
@react-email/markdown:dev: > @react-email/markdown@0.0.12 dev /Users/nico/Documents/projects/react-email-1/packages/markdown
@react-email/markdown:dev: > tsup src/index.ts --format esm,cjs --dts --external react --watch
@react-email/markdown:dev: 
demo:dev: sh: email: command not found
demo:dev:  ELIFECYCLE  Command failed.
@react-email/img:dev: 
@react-email/img:dev: > @react-email/img@0.0.10 dev /Users/nico/Documents/projects/react-email-1/packages/img
@react-email/img:dev: > tsup src/index.ts --format esm,cjs --dts --external react --watch
@react-email/img:dev: 
demo:dev: ERROR: command finished with error: command (/Users/nico/Documents/projects/react-email-1/apps/demo) /opt/homebrew/bin/pnpm run dev exited (1)
demo#dev: command (/Users/nico/Documents/projects/react-email-1/apps/demo) /opt/homebrew/bin/pnpm run dev exited (1)

 Tasks:    0 successful, 24 total
Cached:    0 cached, 24 total
  Time:    2.736s 
Failed:    demo#dev

 ERROR  run failed: command  exited (1)
 ELIFECYCLE  Command failed with exit code 1.

Extra: trying to build the repository runs into a similar but different error

......
......
demo:build:     at ChildProcess.<anonymous> (/Users/nico/Documents/projects/react-email-1/packages/react-email/dist/cli/index.js:2556:44)
demo:build:     at ChildProcess.emit (node:events:519:28)
demo:build:     at maybeClose (node:internal/child_process:1105:16)
demo:build:     at ChildProcess._handle.onexit (node:internal/child_process:305:5)
demo:build:  ELIFECYCLE  Command failed with exit code 1.
demo:build: ERROR: command finished with error: command (/Users/nico/Documents/projects/react-email-1/apps/demo) /opt/homebrew/bin/pnpm run build exited (1)
   Linting and checking validity of types  ..
demo#build: command (/Users/nico/Documents/projects/react-email-1/apps/demo) /opt/homebrew/bin/pnpm run build exited (1)

 Tasks:    22 successful, 24 total
Cached:    0 cached, 24 total
  Time:    1m35.741s 

Expected Behavior

The development instructions in the repository read me should work.

What's your node version? (if relevant)

v20.16.0

gabrielmfern commented 2 weeks ago

Agreed that we need to improve the contributing guide, we do have a big PR #1342 that gives written info for everything you would need but it still isn't merged. What you could do for now is check the preview deployment for it and give some feedback to let us know what you think.

gabrielmfern commented 2 weeks ago

Looking at the error you had on pnpm build, can you share the full logs for the demo?

paradoxloop commented 2 weeks ago

Thanks @gabrielmfern

Following the instructions on preview deployment:

> sudo corepack enable
corepack prepare pnpm@latest --activate
Preparing pnpm@latest for immediate activation...

> pnpm install
Scope: all 31 workspace projects
Lockfile is up to date, resolution step is skipped
Packages: +1164
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 1164, reused 1123, downloaded 0, added 1164, done
 WARN  Failed to create bin at /Users/nico/Documents/projects/react-email-2/apps/demo/node_modules/.bin/email. ENOENT: no such file or directory, open '/Users/nico/Documents/projects/react-email-2/packages/react-email/dist/cli/index.js'
 WARN  Failed to create bin at /Users/nico/Documents/projects/react-email-2/benchmarks/preview-server/node_modules/.bin/email. ENOENT: no such file or directory, open '/Users/nico/Documents/projects/react-email-2/packages/react-email/dist/cli/index.js'
 WARN  Failed to create bin at /Users/nico/Documents/projects/react-email-2/apps/web/node_modules/.bin/email. ENOENT: no such file or directory, open '/Users/nico/Documents/projects/react-email-2/packages/react-email/dist/cli/index.js'
 WARN  Failed to create bin at /Users/nico/Documents/projects/react-email-2/packages/create-email/template/node_modules/.bin/email. ENOENT: no such file or directory, open '/Users/nico/Documents/projects/react-email-2/packages/react-email/dist/cli/index.js'

devDependencies:
+ @changesets/cli 2.27.7
+ @types/node 18.18.0
+ @types/react <- types-react 19.0.0-rc.1
+ @types/react-dom <- types-react-dom 19.0.0-rc.1
+ eslint 8.50.0
+ happy-dom 12.2.2
+ prettier 3.0.3
+ prettier-plugin-tailwindcss 0.6.6
+ tsconfig 0.0.0 <- packages/tsconfig
+ tsup 7.2.0
+ turbo 1.13.3
+ vite 5.0.13
+ vitest 0.34.6

 WARN  Failed to create bin at /Users/nico/Documents/projects/react-email-2/benchmarks/preview-server/node_modules/.bin/email. ENOENT: no such file or directory, open '/Users/nico/Documents/projects/react-email-2/benchmarks/preview-server/node_modules/react-email/dist/cli/index.js'
 WARN  3 other warnings
Done in 5.9s

pnpm build output was large so put it in git gist

paradoxloop commented 2 weeks ago

With the new instructions - even though the build fails pnpm dev works after running build.

gabrielmfern commented 1 week ago

So the issue is happening when email build is ran inside of apps/demo. It seems to happen at the build step that runs npm install inside of apps/demo/.react-email. Could you try running npm install there manually to see if you can get some more logs out of it?

paradoxloop commented 1 week ago

@gabrielmfern running pnpm install inside the apps/demo/.react-email folder produces no errors. I dont use npm however running npm install inside that directory results in:


>>> .react-email % npm install

npm error code EEXIST

npm error syscall rename

npm error path /Users/nico/.npm/_cacache/tmp/1437ebc1

npm error dest /Users/nico/.npm/_cacache/content-v2/sha512/70/75/299b8b0caf9d570250806789424cda9f98bac7dbd640eea8fc52c3c31e7f5327c7d0cbf8a1bbc7ca0aaf3e4fc6628925d811668c1e84647eca20052b2a20

npm error errno EEXIST

npm error Invalid response body while trying to fetch https://registry.npmjs.org/keyv: EACCES: permission denied, rename '/Users/nico/.npm/_cacache/tmp/1437ebc1' -> '/Users/nico/.npm/_cacache/content-v2/sha512/70/75/299b8b0caf9d570250806789424cda9f98bac7dbd640eea8fc52c3c31e7f5327c7d0cbf8a1bbc7ca0aaf3e4fc6628925d811668c1e84647eca20052b2a20'

npm error File exists: /Users/nico/.npm/_cacache/content-v2/sha512/70/75/299b8b0caf9d570250806789424cda9f98bac7dbd640eea8fc52c3c31e7f5327c7d0cbf8a1bbc7ca0aaf3e4fc6628925d811668c1e84647eca20052b2a20

npm error Remove the existing file and try again, or run npm

npm error with --force to overwrite files recklessly.

npm error A complete log of this run can be found in: /Users/nico/.npm/_logs/2024-09-02T18_10_37_789Z-debug-0.log```
gabrielmfern commented 1 week ago

@paradoxloop Even if you don't use npm, email build does run it as it is the most reliable option by default. The .react-email directory is mostly meant to be used on CI, so it shouldn't matter that much.

When looking at your error, it does seem like you ran sudo npm install at some point, since the cache there seems to only be allowed access to administrators. Could you maybe try sudo npm cache clear --force and then running npm install again?