jsx-email icon indicating copy to clipboard operation
jsx-email copied to clipboard

Quick start with a new project fails

Open TomOne opened this issue 10 months ago • 13 comments

  • Component or Package Name: create-jsx-email
  • Component or Package Version: 2.1.0
  • @jsxp-email/cli Version?: none
  • Operating System (or Browser): Ubuntu 24.04
  • Node Version: 22.13.0
  • Link to reproduction (⚠️ read below): unable to provide one, see below

An error occurs when I try to follow these instructions: https://jsx.email/docs/quick-start#new-projects

Steps to reproduce

  1. npm create jsx-email
  2. cd email-project && npm install
  3. npm run dev

Expected Behavior

No errors when running npm run dev.

Actual Behavior

$ npm run dev

> [email protected] dev
> email preview ./templates

[12:00:00]  info  Found 1 file:
[12:00:00]  info     /tmp/email-project/templates/email.tsx 

[12:00:00]  info  Starting build...
Error: Cannot find module '/jsx-email/build/email-PLODGWOF.js' imported from /tmp/email-project/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@jsx-email+plug_hdwmguib65h4hbdsg3y6z7yvjm/node_modules/jsx-email/dist/esm/cli/commands/build.mjs
    at finalizeResolution (node:internal/modules/esm/resolve:275:11)
    at moduleResolve (node:internal/modules/esm/resolve:932:10)
    at defaultResolve (node:internal/modules/esm/resolve:1056:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:654:12)
    at ModuleLoader.#cachedDefaultResolve (node:internal/modules/esm/loader:603:25)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:586:38)
    at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:242:38)
    at onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:546:36)
    at TracingChannel.tracePromise (node:diagnostics_channel:344:14)
    at ModuleLoader.import (node:internal/modules/esm/loader:545:21)

The code appears to import a non-existing file. The /build directory is not created.

Additional Information

The StackBlitz reproduction template doesn’t seem work either. Running it fails with the following error:

> [email protected] dev
> email ./templates

jsh: spawn email ENOENT

Therefore I’m unable to provide a link to reproduce the error.

TomOne avatar Jan 17 '25 11:01 TomOne

We have a set of smoke tests which uses create-jsx-email to setup the tests, so we have a lot of confidence that it's working correctly. The issue you're running into probably lies elsewhere. It's unfortunate that Stackblitz isn't being maintained anymore, and has issues with standard bash compatibility (which is why it's throwing that error). But the issue template does outline that you can spin up a repository to demonstrate the issue.

This is one of those that without a reproduction, we're not going to be able to help, because what you're seeing is drastically different from what we're seeing.

shellscape avatar Jan 17 '25 22:01 shellscape

Thank you for your elaborate answer. I’m sorry I just created this issue without providing a reproducible test case at first. Now I finally managed to consistently reproduce the error by running it inside Docker:

# `yes ""` sends Enter key presses to `npm create jsx-email` to automatically select the defaults.
docker run --rm node:22-slim sh -c 'cd /tmp && yes "" | npm create jsx-email && cd /tmp/email-project && npm install && npm run build'

The final npm run build command throws the same error as above: Cannot find module '/jsx-email/build/email-….

Interestingly, npm run build succeeds without errors when running the same command, but replacing /tmp with a different directory, e.g. /app:

docker run --rm node:22-slim sh -c 'mkdir /app && cd /app && yes "" | npm create jsx-email && cd /app/email-project && npm install && npm run build'

This should be consistently reproducible on any machine with Docker installed. Would you like me to create a GitHub Action or something similar to be able to provide a reproduction link?

Apparently the path to the module is not constructed correctly when running it inside the /tmp directory: /jsx-email/build…, but it should be /tmp/jsx-email/build….

I also got the same error when running npm create jsx-email && … npm run dev in Windows inside the %HOMEPATH%\Downloads directory. I noticed that the smoke tests on Windows have all failed: https://github.com/shellscape/jsx-email/actions/workflows/test-windows.yml. Unfortunately the test logs are no longer available, so I’m not sure if they failed because of this error or because of a different one.

P.S.: Thank you for this project. Being able to create emails with React is great!

TomOne avatar Jan 20 '25 09:01 TomOne

OK thanks for doing that deep dive. jsx-email uses the system temp directory to do a lot of file writes and reads. That's not likely to change because that's the standard for that kind of thing. This is likely a problem with how we're resolving the temp paths once they've been constructed. For now the guidance should be not to run this in a system temp directory, but we can take a look at that directory building at some point. (As always if you find the culprit sooner, please let us know and we'll get a fix in for you, or merge a PR for you)

As for the windows smoke tests - that isn't something that's actually in the repo. If you go to main branch and the .github directory, you won't find that there. Those runs are from a user attempting to contribute a Windows version of the Smoke Test workflow. If you could help triage what the issues are on Windows in that %HOMEPATH% scenario, we'd be happy to implement some fixes.

shellscape avatar Jan 20 '25 14:01 shellscape

I'll be seeing if there's anything we can do around this, this week.

shellscape avatar Jan 28 '25 13:01 shellscape

Same, the create jsx-email command creates a dead package.json

{
  "name": "${PROJECT_NAME}",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "private": true
}

mikechabot avatar Feb 07 '25 21:02 mikechabot

@mikechabot I quite literally just ran the command from the original issue and it created everything just fine. sounds like you have a separate issue to report, for which we could use the details

shellscape avatar Feb 07 '25 21:02 shellscape

this is the same for few months, doing with npm, bun, pnpm, yarn, LTS node v22.13.1. I tried on 3 different machines(2 win, 1 linux/ubuntu). So I moved away from sx-email, it was the same with email-react when they done major upgrade

sysmat avatar Feb 08 '25 10:02 sysmat

same error

somethingxdev avatar Apr 14 '25 15:04 somethingxdev

@somethingxdev when an issue has been opened and has been acknowledged to be a bug, you don't need to reply with a "same" or "me too" response. It actually doesn't contribute to the issue, only creates extra noise and notifications for the issue. Instead, use the reaction button to lend support to the original post, or a particular existing reply.

shellscape avatar Apr 14 '25 16:04 shellscape

  • @shellscape this is very bad, it work on my computer. I try just now with npm, pnpm, bun and still not working.
  • using create-jsx-email v2.1.0 , still using your own old lib jsx-email ^2.0.0 → ^2.7.1
  • if this projcet is only for MAC, than said it loud not hide

sysmat avatar Apr 19 '25 09:04 sysmat

@sysmat sorry but I can't understand your English there. put together a reproduction repository so we can see what you see.

shellscape avatar Apr 19 '25 11:04 shellscape

  • jsx-email\node_modules\jsx-email\dist\esm\cli\commands\build.mjs is trying to import something which is not exist jsx-email\build\email-RHQWTXGC.js
  • and it try to import from root of a drive C:\AppData\Local\Temp\ and project is C:\......\GitHub\jsx-email , very bad
  • This building system should use relative paths where project is located

I'm not native English, I give up of jsx-email long time ago from version > 1

sysmat avatar Apr 19 '25 12:04 sysmat

  1. security risk: writing out side project path is high risk, if I run as user npm run dev my OS will prevent to write to root of drive, I'm glad for my OS doing it
  2. If you want to Accessing the AppData and UserProfile Folders in Windows then must be done correctly, maybe by %appdata%
  3. The most common and easy way is to do it relative to project path

sysmat avatar Apr 20 '25 07:04 sysmat

Ran through the scenarios in this issue today after recent changes, and could not reproduce. If this comes up again, please start a new issue since this one is very old.

shellscape avatar Oct 29 '25 14:10 shellscape