Astro Monorepo Example: Imports in Payload cause Errors in Astro

[ericwaetke]

Describe the Bug

After seeing the Astro and Payload Monorepo Example, i immediately tried to replicate that in my own project.

But as I found out quickly: only this very basic example works, the bigger the project, the higher the possibility of breaking. Unfortunately, I lack the understanding what is the fundamental issue here, but I hope there is a single (and simple) easy fix for the multiple problems I have.

I think the somewhat underlying issue is, that Astro/Vite is parsing, checking or executing the code inside the repo's payload dir/project.

Then I import something in payload with an alias like the @, I get an Astro error, that the import cannot be resolved. This happens, even if I tell vite not to optimize that dependency like so:

export default defineConfig({
  output: 'server',
  adapter: node({
    mode: 'standalone',
  }),
  vite: {
    optimizeDeps: {
      exclude: ['@repo/payload'],
    }
  }
})

There is a band-aid solution for that; just using relative import paths.
But in a bigger codebase of mine I use React Email to render Emails sent from payload. That also causes some sort of Astro error. My guess is, that Astros/Vite's JSX parser in that project can't compile the react email jsx, as I don't use react, but solidjs in that project.

18:03:36 [ERROR] [content] repo/apps/payload/src/emails/newsletter.tsx: Invalid JSX: <tr> cannot be child of <table>
  148 |                   <Section className="mt-10 text-center">
  149 |                           <table className="w-full">
> 150 |                                   <tr className="w-full">
      |                                   ^
  151 |                                           <td align="center">
  152 |                                                   <Img
  153 |                                                           alt="React Email logo"

I believe these issues are both symptoms of the same problem, which hopefully can be something like a simple config change?

Link to the code that reproduces this issue

https://github.com/ericwaetke/astro-payload-mono

Reproduction Steps

1. Import something in Payload with some sort of path alias, like the default @/...
2. Start both servers

Which area(s) are affected? (Select all that apply)

area: templates

Environment Info

Payload: 3.23.0
Node: 22.11.0
Astro: 5.3
Nextjs: 15.1.0