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

fix: `demo` app not on the `pnpm-workspace.yaml` file

Open gabrielmfern opened this issue 1 year ago • 1 comments

The problem

For some time, we had to remove the application inside apps/demo out of the pnpm-workspace.yaml file due to an error, we had when using the workspace version of react-email. This was caused by the workaround property serverComponentsExternalPackages not working with a workspace version of a package.

This property would make Next ignore that we were importing react-dom/server (which usually throws an error) so that the Next app would work when running for the users. But this property didn't seem to work when running a version of the package that was from the root workspace. This would cause it to throw errors, and since we could not find any way to force install the @react-email/render from the registry, this error would always happen when we had the demo as a workspace.

The solution

The solution to this was actually quite simple, and it also allows us to remove the serverComponentsExternalPackages configuration from the Preview server's Next config.

To fix this, the only needed thing was to dynamically import the @react-email/render package inside react-email instead of doing it normally. This is also the same workaround we use inside the renderAsync function from the @react-email/render package.

This PR also adds the demo into the workspaces, along with updating all of its dependencies to the latest canaries.

How can I test this?

  1. Checkout into the branch (git checkout fix/demo-not-on-workspace)
  2. Run pnpm install and turbo build inside of apps/demo
  3. Run pnpm dev
  4. Open http://localhost:3000/preview/notifications/vercel-invite-user and verify that it does not error

You can also check the demo vercel deploy that was just built from this, also running from the workspace version of react-email.

gabrielmfern avatar Apr 23 '24 16:04 gabrielmfern

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
react-email ❌ Failed (Inspect) May 8, 2024 2:18pm
react-email-demo ❌ Failed (Inspect) May 8, 2024 2:18pm

vercel[bot] avatar Apr 23 '24 16:04 vercel[bot]