[Nuxt] vue-email working on dev server but not on prod build

[chang-ryan]

Hello, I've been devving with this package. I just deployed and realized it's not working in prod. When serving the project locally (prod preview), I am getting this error where the email template is not being found.

this works:

nuxt dev

this does not work:

nuxt build && nuxt preview

See project details below:

package.json

"@vue-email/nuxt": "^0.8.18",

// nuxt.config

...
  modules: [
    '@nuxtjs/tailwindcss',
    '@nuxtjs/prismic',
    '@nuxtjs/supabase',
    'nuxt-gtag',
    '@vue-email/nuxt',
  ],

  vueEmail: {
    baseUrl: process.env.NUXT_PUBLIC_BASE_URL,
    autoImport: true,
  },

import { Resend } from 'resend'
import { useCompiler } from '#vue-email'

export default defineEventHandler(async (event) => {
  const body = await readBody(event)

  if (body?.record?.age_verification_status === 'success' && body?.record?.email) {
    const resend = new Resend(process.env.RESEND_API_KEY || '')

    const { html, text } = await useCompiler('AgeVerificationConfirmation.vue', {
      props: {
        name: body.record.name,
      },
    })

    const { data, error } = await resend.emails.send({
      from: 'noreply@gmail.com',
      to: [body.record.email],
      subject: 'Subject',
      html,
      text,
    })

    if (error) {
      const message = `An error occured with \`resend\`: ${error.message}`
      console.error(message)

      throw createError({
        statusCode: 400,
        statusMessage: message,
      })
    }

    setResponseStatus(event, 200)

    return {
      status: 200,
      data,
    }
  }

  return null
})

 ╭────────────────────────────────────────Preview Mode──────────────────────────────────────────╮
 │                                                                                              │
 │  You are running Nuxt production build in preview mode.                                      │
 │  For production deployments, please directly use node ./server/index.mjs command.            │
 │                                                                                              │
 │  Node.js:           v20.7.0                                                                  │
 │  Nitro Preset:      node-server                                                              │
 │  Working directory: .output                                                                  │
 │                                                                                              │
 ╰──────────────────────────────────────────────────────────────────────────────────────────────╯

ℹ Loading .env. This will not be loaded when running the server in production.                                  6:04:18 PM
ℹ Starting preview command: node ./server/index.mjs                                                             6:04:18 PM
                                                                                                                 6:04:18 PM
Listening on http://[::]:3000

Error: Cannot find module '/Users/ryanchang/project/.output/server/node_modules/vue-email/dist/index.cjs'
    at createEsmNotFoundErr (node:internal/modules/cjs/loader:1070:15)
    at finalizeEsmResolution (node:internal/modules/cjs/loader:1063:15)
    at resolveExports (node:internal/modules/cjs/loader:547:14)
    at Module._findPath (node:internal/modules/cjs/loader:621:31)
    at Module._resolveFilename (node:internal/modules/cjs/loader:1034:27)
    at Module._load (node:internal/modules/cjs/loader:901:27)
    at Module.require (node:internal/modules/cjs/loader:1115:19)
    at require (node:internal/modules/helpers:130:18)
    at /Users/ryanchang/project/.output/server/node_modules/import-string/dist/aKBn3oFdYwffCaDZeg7k7.js:36:24
    at Script.runInContext (node:vm:133:12) {
  code: 'MODULE_NOT_FOUND',
  path: '/Users/ryanchang/project/.output/server/node_modules/vue-email/package.json'
}
[nuxt] [request error] [unhandled] [500] Error rendering template AgeVerificationConfirmation: Error: Component AgeVerificationConfirmation not found
  at templateRender (./server/node_modules/@vue-email/compiler/dist/index.mjs:57021:11)
  at async useCompiler (./server/chunks/email-confirmation.post.mjs:28:20)
  at async ./server/chunks/email-confirmation.post.mjs:49:28
  at async Object.handler (./server/chunks/nitro/node-server.mjs:2994:19)
  at async Server.toNodeHandle (./server/chunks/nitro/node-server.mjs:3183:7)

[chang-ryan]

Am I doing something wrong with Nuxt SSR?

[L422Y]

Have you tried 0.8.19 (released today)?

Your error looks different than the one that fix is for.

Does /Users/ryanchang/project/.output/server/node_modules/vue-email/dist/index.cjs exist?

[Flowko]

can you please share what you have in that template and the template directoy, you dont have to share everyhting, just the top level of the script tag and the imports you have inside it

[chang-ryan]

can you please share what you have in that template and the template directoy, you dont have to share everyhting, just the top level of the script tag and the imports you have inside it

below is the only file in the emails folder at project root

<!-- ~/emails/AgeVerificationConfirmation.vue -->

<script lang="ts" setup>
import {
  EButton,
  EContainer,
  EHead,
  EHr,
  EHtml,
  EImg,
  EPreview,
  ESection,
  EText,
} from 'vue-email'

defineProps<{ name?: string }>()

const container = {
  padding: '0 15px',
  margin: '30px auto 64px',
}

const logo = {
  width: '120px',
}

const hr = {
  borderColor: '#414245',
  margin: '20px 0',
  opacity: '0.2',
}

const paragraph = {
  color: '#414245',
  fontSize: '16px',
  lineHeight: '24px',
  textAlign: 'left',
  marginBottom: '24px',
}

const button = {
  backgroundColor: '#414245',
  borderRadius: '2px',
  color: '#fff',
  fontSize: '16px',
  fontWeight: 'medium',
  textDecoration: 'none',
  textAlign: 'center',
  display: 'block',
  maxWidth: '100%',
}
</script>

<template>
  <EHtml lang="en">
    <EHead />
    <EPreview>You're now ready to make purchases on our website!</EPreview>
    <EContainer :style="container">
      <ESection>

      </ESection>
    </EContainer>
  </EHtml>
</template>

[Flowko]

try removing

import {
  EButton,
  EContainer,
  EHead,
  EHr,
  EHtml,
  EImg,
  EPreview,
  ESection,
  EText,
} from 'vue-email'

you dont need that, as the components are auto imported inside of email templates

[chang-ryan]

Interesting. I updated to latest version and removed the import statement. It's working now. Thanks @flowko @L422Y

[chang-ryan]

ah bad news guys, it's not working when deployed on Vercel.

Works locally with build preview, but not when in Vercel production.

[L422Y]

can you try a local build with the same build command?

[chang-ryan]

Vue email is being used in a Nuxt API

/server/api/my-api-endpoint.post.ts

Upon deployment, we can hit it like so:

curl \
  --request POST 'https://my-vercel-app.vercel.app/api/age-verification/email-confirmation'

Here are the logs from Vercel:

[POST] /api/age-verification/email-confirmation status=500

Error loading component Error: The package "esbuild-linux-64" could not be found, and is needed by esbuild.

If you are installing esbuild with npm, make sure that you don't specify the
"--no-optional" or "--omit=optional" flags. The "optionalDependencies" feature
of "package.json" is used by esbuild to install the correct binary executable
for your current platform.
    at generateBinPath (/var/task/node_modules/esbuild/lib/main.js:1819:15)
    at esbuildCommandAndArgs (/var/task/node_modules/esbuild/lib/main.js:1886:33)
    at ensureServiceIsRunning (/var/task/node_modules/esbuild/lib/main.js:2051:25)
    at startSyncServiceWorker (/var/task/node_modules/esbuild/lib/main.js:2261:19)
    at Object.<anonymous> (/var/task/node_modules/esbuild/lib/main.js:2302:3)
    at Module._compile (node:internal/modules/cjs/loader:1356:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1414:10)
    at Module.load (node:internal/modules/cjs/loader:1197:32)
    at Module._load (node:internal/modules/cjs/loader:1013:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:128:12)

[nuxt] [request error] [unhandled] [500] Error rendering template AgeVerificationConfirmation: Error: Component AgeVerificationConfirmation not found
  at templateRender (./node_modules/@vue-email/compiler/dist/index.mjs:57021:11)  
  at async useCompiler (./chunks/email-confirmation.post.mjs:30:20)  
  at async ./chunks/email-confirmation.post.mjs:51:28  
  at async Object.handler (./chunks/nitro/vercel.mjs:2976:19)  
  at async toNodeHandle (./chunks/nitro/vercel.mjs:3165:7)  
  at async Server.<anonymous> (./___vc/__launcher/bridge-server-BGIDXK2J.js:1:9443)

It's similar to what happened when doing a local build preview

P.S.

the API is not being deployed to Vercel edge

[chang-ryan]

can you try a local build with the same build command?

Vercel builds the package with the same function npm run build which is just nuxt build

My nuxt version:

"nuxt": "^3.10.0",

[chang-ryan]

i've been poking through the source code, could be due to this? I think this is where the esbuild-linux-64 issue is popping up

[chang-ryan]

Oh I just found this https://github.com/vue-email/vue-email/issues/58, could be related

[chang-ryan]

pnpm fixed it. god what a rollercoaster lmao