email command fails within pnpm workspace #881

KrisBraun · 2023-08-12T22:13:33Z

Describe the Bug

Following the manual setup inside a pnpm monorepo with a pnpm-workspace.yaml in the root, the email command fails like this:

✔ Emails preview generated
⠋ Installing dependencies...
Scope: all 13 workspace projects
✔ Dependencies installed

> react-email-client@0.0.14 dev /Users/.../libs/email/.react-email
> next dev "--" "-p" "8790"

sh: next: command not found
 ELIFECYCLE  Command failed.
 WARN   Local package.json exists, but node_modules missing, did you mean to install?

Turns out a script was running a pnpm install command, but since it's in the workspace, it simply installed the other packages, but skipped the new one since it doesn't match a pattern.

I solved this by adding [package-path]/.react-email in pnpm-workspace.yaml. Not sure the best general solution. Posting here mainly to help anyone else hitting the same issue.

Which package is affected (leave empty if unsure)

react-email

Link to the code that reproduces this issue

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

To Reproduce

Create a pnpm workspace
Follow https://react.email/docs/getting-started/manual-setup within a package

Expected Behavior

The email command would succeed, or at least provide a clearer error.

What's your node version? (if relevant)

No response

The text was updated successfully, but these errors were encountered:

paul-sachs · 2023-08-22T21:40:32Z

Also just ran into this

Frumba · 2023-08-23T13:42:35Z

I am also having this issue when using it though pnpm workspaces. For now the only work around I use is to go into the .react-email folder and do a yarn install. Then the email dev command works pretty well after this.

shellscape · 2023-08-24T15:34:00Z

The issue is here: https://github.com/resendlabs/react-email/blob/490e0356685c1a6406c89620687725d0b98ad53b/packages/react-email/source/utils/sync-package.ts#L6 and doesn't seem to take into account pnpm or pnpm workspaces.

Using a node_modules/dependency script (https://github.com/resendlabs/react-email/blob/490e0356685c1a6406c89620687725d0b98ad53b/packages/react-email/source/utils/start-server-command.ts#L15 and https://github.com/resendlabs/react-email/blob/490e0356685c1a6406c89620687725d0b98ad53b/client/package.json#L7) is a really weird way to spin up a process. The concept of package binaries exists so authors don't have to do those kinds of shenanigans.

shellscape · 2023-08-24T17:12:21Z

Alright fast followup: If you run npm install within the .react-email directory (even though we're using pnpm), it'll install packages into node_modules and the dev server will run.

I maintain that this is a pretty bad way to ship a dev server, but that's a workaround that requires some manual steps. If you're using a build tool like moon, this step can probably be automated.

seawatts · 2023-10-06T18:05:33Z

Confirmed, @shellscape solution resolves it. Would still like to see this fixed as well though.

jeanhdev · 2023-10-09T10:46:29Z

Can we configure the client to work with pnpm by default?

shellscape · 2023-10-09T12:20:46Z

@seawatts @jeanhdev I ended up forking the project to get around this. you can find the fork on my GitHub profile.

mortocks · 2023-10-19T08:46:13Z

+1

elliotcourant · 2023-10-26T02:20:52Z

Running into this now as well

tsongas · 2023-11-02T04:38:03Z

+1

JasonMan34 · 2023-11-02T23:01:49Z

@bukinoshita If I understand correctly, the current model of the preview server is:

Download a tarball archive that includes a client directory which is in itself a node project, and extract that directory out of the tarball into a folder (.react-email)
Install dependencies inside the newly created .react-email project
Instantiate a watcher to sync emails into the .react-email project
Run the nextjs dev server

This seems overly complex. If someone is using the react-email package then they will, with absolute certainty, need to install the dependencies inside client at some point in life. Why are those dependencies only defined there, rather than have them exist as dependencies of react-email itself?
Which brings me to my next question - Why is client downloaded extracted and ran as a separate project? The next server could be created from within the cli tool, which would fix this issue

I'd be glad to work on a PR for the aforementioned change if it's relevant

This will be a sort of replacement until resend/react-email#960 is merged. Waiting on resend/react-email#881

ismoiliy98 · 2023-11-14T21:15:39Z

Any progress on this?

@JasonMan34 Could you please provide more details on your solution? How would you use next cli to fix this issue? I could fork and use your solution until the fix has been released. Thank you!

jeanhdev · 2023-11-20T13:44:51Z

The Dev X is bad, I get a tons of errors.

Why can't we use pnpm as default ?

Fixed it on my end by
-> removing .react-email build & node_modules
-> installing globally yarn and next with pnpm i -g next && pnpm i -g yarn
-> running pnpm i
-> running pnpm run dev with no errors

marcusstenbeck · 2023-11-23T09:06:23Z

I'm using this patch as a workaround to use this package in a pnpm project. You may use it with the patch feature in pnpm.

# patches/react-email@1.9.5.patch
diff --git a/dist/source/utils/install-dependencies.js b/dist/source/utils/install-dependencies.js
index 24f4a82f14037a4e341775fe4f273016adf8ac2e..155ff41d5d3bfb3d185f774703bcd1033096580d 100644
--- a/dist/source/utils/install-dependencies.js
+++ b/dist/source/utils/install-dependencies.js
@@ -11,6 +11,10 @@ const ora_1 = __importDefault(require("ora"));
 const log_symbols_1 = __importDefault(require("log-symbols"));
 const close_ora_on_sigint_1 = require("./close-ora-on-sigint");
 const installDependencies = async (packageManager) => {
+    if(packageManager === 'pnpm'){
+        console.warn(`\n🚨🚨🚨🚨🚨🚨\nUsing \`npm\` instead of \`${packageManager}\` to install react-email preview app dependencies\nThis patch should be removed when react-email can support existing in a pnpm workspace.\nsee: https://github.com/resendlabs/react-email/issues/881\n🚨🚨🚨🚨🚨🚨\n`);
+        packageManager = 'npm';
+    }
     const spinner = (0, ora_1.default)('Installing dependencies...\n').start();
     (0, close_ora_on_sigint_1.closeOraOnSIGNIT)(spinner);
     shelljs_1.default.cd(path_1.default.join(constants_1.REACT_EMAIL_ROOT));

hexcowboy · 2023-12-14T02:41:22Z

pretty easy workaround is to add the .react-email folder to your pnpm-workspaces.yaml

packages:
  - "packages/*"
  - "apps/**"
  - "apps/email/.react-email"

edit: to add more explanation, pnpm workspaces don't look for hidden directories that start with ., which is why you need to manually add it in the pnpm-workspaces.yaml file. there technically is no bug or issue here, it's just how pnpm works

ruigomeseu · 2023-12-22T10:32:35Z

pretty easy workaround is to add the .react-email folder to your pnpm-workspaces.yaml
packages:
  - "packages/*"
  - "apps/**"
  - "apps/email/.react-email"

We experienced the same issue in our monorepo, this workaround worked for us.

gruckion · 2024-01-04T15:34:07Z

@bukinoshita If I understand correctly, the current model of the preview server is:

Download a tarball archive that includes a client directory which is in itself a node project, and extract that directory out of the tarball into a folder (.react-email)

Install dependencies inside the newly created .react-email project

Instantiate a watcher to sync emails into the .react-email project

Run the nextjs dev server

This seems overly complex. If someone is using the react-email package then they will, with absolute certainty, need to install the dependencies inside client at some point in life. Why are those dependencies only defined there, rather than have them exist as dependencies of react-email itself? Which brings me to my next question - Why is client downloaded extracted and ran as a separate project? The next server could be created from within the cli tool, which would fix this issue

I'd be glad to work on a PR for the aforementioned change if it's relevant

100% agree, finally getting around to looking into react email. Sounded promising, but now I see this and I feel like it was made with little thought to how fragile this approach is.

gruckion · 2024-01-04T15:47:54Z

This is not a good developer experience, I am fighting with the tool that's suppose to make our life easier for working with emails.

Workaround, step by step:

Remove .react-email and node_modules from your emails project if it is already there.
Once you have the email project setup npx create-email@latest with no .react-email and node_modules or the wrong lock file. Run pnpm i from the root.
Now add .react-email project to the pnpm-workspace.yml
Run pnpm i again
Now you can run it pnpm --filter emails run dev

.
├── .react-email
├── node_modules
├── package.json
├── src
│   └── emails
│       ├── index.tsx
│       ├── notion-magic-link.tsx
│       ├── plaid-verify-identity.tsx
│       ├── stripe-welcome.tsx
│       └── vercel-invite-user.tsx
├── static
│   ├── notion-logo.png
│   ├── plaid-logo.png
│   ├── plaid.png
│   ├── stripe-logo.png
│   ├── vercel-arrow.png
│   ├── vercel-logo.png
│   ├── vercel-team.png
│   └── vercel-user.png
├── tree
└── tsconfig.json

4 directories, 16 files

Here's the structure of the emails package I am housing my setup within.

In the root of my mono repo I have

packages:
  - "apps/*"
  - "packages/emails/.react-email"
  - "packages/*"
  -

It would be nice if the default package manager could be selected via a cli arg. Instead of it defaulting to whatever it finds on the system first.

You might also need to add it to .eslintignore

Problem

If you clone the repo from scratch, since .react-email is not in version control the package path won't exist. I tested cloning the repo from fresh and ran pnpm i and then pnpm --filter emails run dev and it worked fine.

{
  "name": "@bob/emails",
  "version": "0.0.1",
  "scripts": {
    "dev": "email dev -d ./src/emails/ -p 3003",
    "export": "email export -d ./src/emails/"
  },
  "dependencies": {
    "@react-email/components": "0.0.12",
    "react-email": "1.10.0"
  },
  "devDependencies": {
    "@types/node": "^20.6.0",
    "typescript": "^5.1.6"
  }
}

KrisBraun added the Type: Bug Confirmed bug label Aug 12, 2023

shellscape mentioned this issue Aug 24, 2023

feat(react-email): Add skip install flag #892

Merged

elliotcourant mentioned this issue Oct 26, 2023

feat(ui): Moving user interface to workspace. monetr/monetr#1586

Merged

3 tasks

gabrielmfern linked a pull request Nov 8, 2023 that will close this issue

feat(CLI): improve performance and stability for the preview client #960

Closed

elliotcourant added a commit to monetr/monetr that referenced this issue Nov 12, 2023

feat(ui): Getting emails working in storybook.

0a46c63

This will be a sort of replacement until resend/react-email#960 is merged. Waiting on resend/react-email#881

gabrielmfern mentioned this issue Nov 23, 2023

fix(react-email): preview client problems with monorepos and outdated preview client downloaded #1047

Closed

marcusstenbeck mentioned this issue Dec 8, 2023

feat(render): Remove brackets surrounding anchor tags with plain text option #1087

Merged

gabrielmfern mentioned this issue Jan 15, 2024

feat(react-email): Stable preview client #1100

Merged

bukinoshita closed this as completed in #1100 Jan 19, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

email command fails within pnpm workspace #881

email command fails within pnpm workspace #881

KrisBraun commented Aug 12, 2023

paul-sachs commented Aug 22, 2023

Frumba commented Aug 23, 2023

shellscape commented Aug 24, 2023

shellscape commented Aug 24, 2023

seawatts commented Oct 6, 2023

jeanhdev commented Oct 9, 2023

shellscape commented Oct 9, 2023

mortocks commented Oct 19, 2023

elliotcourant commented Oct 26, 2023

tsongas commented Nov 2, 2023

JasonMan34 commented Nov 2, 2023

ismoiliy98 commented Nov 14, 2023

jeanhdev commented Nov 20, 2023 •

edited

Loading

marcusstenbeck commented Nov 23, 2023

hexcowboy commented Dec 14, 2023 •

edited

Loading

ruigomeseu commented Dec 22, 2023

gruckion commented Jan 4, 2024

gruckion commented Jan 4, 2024 •

edited

Loading

email command fails within pnpm workspace #881

email command fails within pnpm workspace #881

Comments

KrisBraun commented Aug 12, 2023

Describe the Bug

Which package is affected (leave empty if unsure)

Link to the code that reproduces this issue

To Reproduce

Expected Behavior

What's your node version? (if relevant)

paul-sachs commented Aug 22, 2023

Frumba commented Aug 23, 2023

shellscape commented Aug 24, 2023

shellscape commented Aug 24, 2023

seawatts commented Oct 6, 2023

jeanhdev commented Oct 9, 2023

shellscape commented Oct 9, 2023

mortocks commented Oct 19, 2023

elliotcourant commented Oct 26, 2023

tsongas commented Nov 2, 2023

JasonMan34 commented Nov 2, 2023

ismoiliy98 commented Nov 14, 2023

jeanhdev commented Nov 20, 2023 • edited Loading

marcusstenbeck commented Nov 23, 2023

hexcowboy commented Dec 14, 2023 • edited Loading

ruigomeseu commented Dec 22, 2023

gruckion commented Jan 4, 2024

gruckion commented Jan 4, 2024 • edited Loading

Workaround, step by step:

Problem

jeanhdev commented Nov 20, 2023 •

edited

Loading

hexcowboy commented Dec 14, 2023 •

edited

Loading

gruckion commented Jan 4, 2024 •

edited

Loading