It seems useCompiler returns Promise<any> when used like so:

import { useCompiler } from "#vue-email";

export default defineEventHandler(async () => {
  const template = await useCompiler("TestEmail.vue");
  return template.html;
});

Am I missing something ?

I thought I had broken something but I realize the colors for text are just very faint

Currently we can see three tabs on playground/devtools:

The target would be add maybe other tab or section, where we can put/change the template props, to see applied on the most real way.

Now, we just can see the props like that (default settled on template):

By adding props directly in devtools on the most real scenario can add best context for the user

Hello i have a issue when i compile the nuxt 3
I use this package on nuxt 3 in server mode becuse my case is when i register user then send the email
i use vue-email version 0.8.0-beta.8 and nodemailer 6.4.14
and my package manager is bun and node version 18

in my project i dont wanna to use i18n because this project only for my local language

then when i run the project and show error like this

thank you

Hey there,

we are using the @vue-email/nuxt package in our app just like described in the docs and it runs perfectly fine in our local environment. But when we deploy to Vercel we get the following error message:

[nuxt] [request error] [unhandled] [500] Cannot find package 'vue-email' imported from /var/task/node_modules/@vue-email/compiler/dist/index.mjs
  at packageResolve (node:internal/modules/esm/resolve:858:9)  
  at moduleResolve (node:internal/modules/esm/resolve:915:20)  
  at moduleResolveWithNodePath (node:internal/modules/esm/resolve:1135:12)  
  at defaultResolve (node:internal/modules/esm/resolve:1178:79)  
  at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:396:12)  
  at ModuleLoader.resolve (node:internal/modules/esm/loader:365:25)  
  at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:240:38)  
  at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:85:39)  
  at link (node:internal/modules/esm/module_job:84:36)

Any idea what could be the reason?

We also tried to add vue-email as a dep manually, but nothing changed.

Build fails when deploying to Vercel edge using nuxt with the following errors
/vercel/path0/.nuxt/dist/server/_nuxt/welcome-BePl3Abn.js:6034:15: ERROR: Big integer literals are not available in the configured target environment ("es2019")

Big integer literals are not available in the configured target environment ("es2019")

The current fix for me is to add this to nuxt.config, but that should either be documented or fixed as it is hard to find. Not sure which is the better option.
vite: { esbuild: { target: 'esnext' } },

// package.json
"devDependencies": {
"@nuxt/content": "^2.12.1",
"@nuxt/devtools": "latest",
"@nuxt/ui": "^2.13.0",
"@nuxtjs/i18n": "^8.3.1",
"@nuxtjs/supabase": "^1.2.1",
"nuxt": "^3.10.1",
"nuxt-disqus": "^1.0.1"
},
"dependencies": {
"@vue-email/nuxt": "^0.8.19",
"@vueuse/core": "^10.9.0",
"resend": "^3.2.0",
"yup": "^1.4.0"
}

ERROR:
No driver set for storage mount point "50".
nitro 15:31:12

WARN No driver set for storage mount point "100". nitro 15:31:12

WARN No driver set for storage mount point "200". nitro 15:31:12

WARN No driver set for storage mount point "300". nitro 15:31:12

WARN No driver set for storage mount point "400". nitro 15:31:12

WARN No driver set for storage mount point "500". nitro 15:31:12

WARN No driver set for storage mount point "600". nitro 15:31:12

WARN No driver set for storage mount point "700". nitro 15:31:12

WARN No driver set for storage mount point "800". nitro 15:31:12

WARN No driver set for storage mount point "900". nitro 15:31:12

WARN No driver set for storage mount point "950". nitro 15:31:12

WARN No driver set for storage mount point "DEFAULT". nitro 15:31:12

ERROR [uncaughtException] callback is not a function 15:31:12

at process.processTicksAndRejections (node:internal/process/task_queues:77:11)

Node 20 / Nuxt 3.8.2

Installed vue-email, @vue-email/nuxt and even vue-i18n (different issue, nuxt wont start without vue-i18n)
I tried it with multiple 0.8.0 beta versions, no luck.

Error shows when doing 'npm run build' In dev mode it all works.

My last attempt was only using "@vue-email/compiler": "^0.8.0-beta.8", and that resulted in same error

 ERROR  TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type function ([Function (anonymous)])                                 nitro 2:47:15 PM


undefined


 ERROR  The "path" argument must be of type string. Received type function ([Function (anonymous)])                                                                         2:47:15 PM

  at new NodeError (node:internal/errors:406:5)
  at validateString (node:internal/validators:162:11)
  at Function.join (node:path:1175:7)
  at Object.mockPath [as then] (node_modules/@vercel/nft/out/analyze.js:168:27) 



 ERROR  The "path" argument must be of type string. Received type function ([Function (anonymous)])```

Actual Behavior

I cannot use custom components in the ~/emails folder, I get the following error

[Vue warn]: Failed to resolve component: EmailCustomLink
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

Expected Behavior

It should work as described in vue-email/vue-email#64

Reproduction

https://stackblitz.com/edit/nuxt-starter-a69obu?file=emails%2FCustomLink.vue

Hi, seen this mentioned in another issue but no clear answer was given.

When I build for the cloudflare-pages environment I get the following error:

  at Object.resolveId (node_modules/nitropack/dist/shared/nitro.4ea992bc.mjs:1973:17)
  at async PluginDriver.hookFirstAndGetPlugin (node_modules/rollup/dist/es/shared/node-entry.js:18592:28)
  at async resolveId (node_modules/rollup/dist/es/shared/node-entry.js:17261:26)
  at async ModuleLoader.resolveId (node_modules/rollup/dist/es/shared/node-entry.js:17675:15)
  at async node_modules/@rollup/plugin-commonjs/dist/es/index.js:785:16
  at async Promise.all (index 3)
  at async node_modules/@rollup/plugin-commonjs/dist/es/index.js:777:32
  at async rewriteRequireExpressionsAndGetImportBlock (node_modules/@rollup/plugin-commonjs/dist/es/index.js:1354:28)
  at async transformCommonjs (node_modules/@rollup/plugin-commonjs/dist/es/index.js:1928:23)
  at async transform (node_modules/rollup/dist/es/shared/node-entry.js:17593:16) 



 ERROR  Cannot resolve "pnpapi" from "/node_modules/esbuild/lib/main.js" and externals are not allowed!                          

Should I be able to build for this environment? If not, are you able to advise on when it may be available - if all?

Thanks.

Hello, I only see example dashboard when accessing Vue Email tab.

And I see this error in the terminal:

Is something wrong on my side or is there a bug in the code for fetching email components from directory?

Thank you for your help

I created this issue on the main package, but I think it's more appropriate here

vue-email/vue-email#168

environment:

- Operating System: Windows_NT
- Node Version:     v20.9.0
- Nuxt Version:     3.8.1
- CLI Version:      3.9.1
- Nitro Version:    2.7.2
- Package Manager:  [email protected]
- Builder:          -
- User Config:      devtools, typescript, modules
- Runtime Modules:  @vue-email/[email protected]
- Build Modules:    -

~/package.json

{
  "devDependencies": {
    "@nuxt/devtools": "latest",
    "@vue-email/nuxt": "0.8.0-beta.4",
    "nuxt": "^3.8.1",
    "vue": "^3.3.8",
    "vue-router": "^4.2.5"
  }
}

~/nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: false },
  typescript: { shim: false },
  modules: [["@vue-email/nuxt", {}]],
});

~/emails/PasswordReset.vue

<template>
  <EHtml>
    <EHead />
    <EBody>
      <ELink :href="link">Reset Password</ELink>
    </EBody>
  </EHtml>
</template>

<script setup lang="ts">
const props = defineProps<{
  link: string;
}>();
</script>

~/server/api/send.post.ts

import { useCompiler } from "#vue-email";

export default defineEventHandler(async (event) => {
  const template = await useCompiler("PasswordReset.vue", {
    props: {
      link: `${getRequestURL(event).origin}/auth/reset-password`,
    },
  });

  return { ok: true };
});

Run pnpm build

Update ~/emails/PasswordReset.vue is working fine

<template>
  <a :href="link"></a>
</template>

<script setup lang="ts">
const props = defineProps<{
  link: string;
}>();
</script>

Is this an expected error? Or am I doing something wrong? And using this package will cause the build size to be increased from 2.24MB (532KB gzip) to 47.1MB (12MB gzip), The cost is too great...

If can improve the size of the problem that would be great! Make it lighter and less burdensome to use

Hello, I have problems when running this in Nuxt 3.10 in production.

The app compiles successfully, but I always get this email in runtime when I try to send an email:

Node.js v20.11.0
Mac-mini:web harry$ node ./.output/server/index.mjs
Listening on http://[::]:3000
New request: http://localhost:3000/api/emails/team/activated
Error loading component node:internal/modules/cjs/loader:598
throw e;
^

Error: Cannot find module '/Users/harry/Documents/mamp/dpnb_2024/web/.output/server/node_modules/vue-email/dist/index.cjs'
at createEsmNotFoundErr (node:internal/modules/cjs/loader:1181:15)
at finalizeEsmResolution (node:internal/modules/cjs/loader:1169:15)
at resolveExports (node:internal/modules/cjs/loader:591:14)
at Module._findPath (node:internal/modules/cjs/loader:668:31)
at Module._resolveFilename (node:internal/modules/cjs/loader:1130:27)
at Module._load (node:internal/modules/cjs/loader:985:27)
at Module.require (node:internal/modules/cjs/loader:1235:19)
at require (node:internal/modules/helpers:176:18)
at /Users/harry/Documents/mamp/dpnb_2024/web/.output/server/node_modules/import-string/dist/CiqvkLgy-kalP_9eSAAli.js:36:24
at Script.runInContext (node:vm:133:12) {
code: 'MODULE_NOT_FOUND',
path: '/Users/harry/Documents/mamp/dpnb_2024/web/.output/server/node_modules/vue-email/package.json'
}

When I look at the mentioned directory there is index.mjs file, but not index.cjs.

What should I do to resolve the issue?

I am using this version of package: "@vue-email/nuxt": "^0.8.17"

Thank you for your help.

Hello, I've been trying to make this module send the templates unsuccessfully.

My setup is Nuxt 3 (SSR) and want to use with nodemailer (but could work with any other really). After reading articles, documentation back and forth and attempting tons of tries, everything seems misleading.

There is nothing that would help most than a minimal demo page like they do with other modules.
See https://tailwindcss.nuxtjs.org/examples/basic for reference.

The basic stuff should cover form inputs that add info to props, that are included in the email template, that is sent with the desired provider (nodemailer or else).

Do you think this is possible? Would help a lot. Thanks!

I wonder how I can preview template in devtools that use props. Right now it gives me tons of errors:

Error rendering template Welcome: TypeError: Cannot read properties of undefined (reading 'firstName')

Btw some other feedback:

• Within the devtools I cant scroll the Vue Email content (I am using Chrome on macOS)
• I couldnt find where to preview my templates in the devtools. I only saw accidently when clicking in the search there I could find them. This could be made more obvious.
• The docs dont say any word about how to preview a email template. Is previewing them in devtools the only option? Or can I jsut drop the components in a dev page?

Not scrolling:

Hi there! I want to create a Nuxt Layer that holds in a few email templates and the apps consuming this layer should be able to render these templates.

This is currently not possible though. The issue is, that vue-email searches for the ~/emails directory in the root of the consuming apps, not of the original layer app where the ~/emails directory is.

Reproduction

https://github.com/madebyfabian/nuxt-mail-layer-reprod

If you clone this repo, install dependencies and start the playground with pnpm start, you see the effect.

I have the following command to compile the .vue emails into HTML, however the baseUrl is gone after exporting.

Here's the relevant parts of each component

Email

<EImg
  src="/images/logo.png"
  width="100"
  height="33"
  alt="logo"
  :style="logo"
/>

Nuxt Config

// Email
vueEmail: {
  baseUrl: 'https://example.com'
}

package.json

{
  "scripts": {
    "email": "bunx vue-email export --dir emails --out supabase/templates --pretty"
  }
}

When previewing the Email w/ Nuxt Dev Tools, the Image URL works great:

However, after I run the build command, the baseUrl is omitted:

Any help would be much appreciated!!

PS -- What I eventually would like to do is set the baseUrl to an ENV variable to so it works both locally and in production!

// Email
vueEmail: {
  baseUrl: process.env.BASE_URL,
}

Thanks for the awesome library BTW! 💯

Hello, is it possible to use useCompiler with Nuxt on serverless? In older versions it seemed to work, now I can't deploy to Vercel Edge without errors and when I deploy to their serverless functions (AWS Lambda - node), I get back just plain text.

What I get locally:

On Vercel Severless:

Issue Description

When using Nuxt and running nuxt analyze, it is reported that the vue-email files are included in the client bundle, even though they are only used under the server folder (and not imported in any file that would be sent to the client). This issue is impacting the loading time significantly, as these files measure up to around 500kB in the entry.js file, which is as the name implies the entry file for the whole website and is blocking (atleast from what I could observe through the Lighthouse reports).

Expected Behavior

The vue-email package should not be included in the client bundle and operate only server side.

Additional Information

• Nuxt version: 3.7.4
• vue-email version: 0.7.2

Screenshots or Output

As you can see in the below example while the entire screenshot is entry.js (925.57kB) and the blue outlined part is everything that vue-email includes (488.22kB) which covers 52.75% of the the entry.js file.
These numbers are reported by Nuxt.

When build for Cloudflare (all its presets) it will fail on "externals are not allowed".

import { useCompiler } from '#vue-email';

export default defineEventHandler(async (handler) => {
  const template = await useCompiler('TestTemplate.vue');
  return { template };
});

This is from reproduction here: https://stackblitz.com/edit/github-nevpij?file=server%2Fapi%2Ftest-mail.ts

❯ NITRO_PRESET=cloudflare_pages npm run build
… 
ℹ Building Nitro Server (preset: cloudflare_pages)                              nitro 0:38:34
(node-resolve plugin) Could not resolve import "unenv/runtime/mock/proxy-cjs/" in /home/projects/aoniabybg.github/node_modules/tough-cookie/lib/cookie.js using exports defined in /home/projects/aoniabybg.github/node_modules/unenv/package.json.
(node:105) [DEP0155] DeprecationWarning: Use of deprecated trailing slash pattern mapping "./runtime/mock/proxy-cjs/" in the "exports" field module resolution of the package at /home/projects/aoniabybg.github/node_modules/unenv/package.json imported from /home/projects/aoniabybg.github/node_modules. Mapping specifiers ending in "/" is no longer supported.
(Use `node --trace-deprecation ...` to show where the warning was created)

[nitro 0:38:42]  ERROR  Error: Cannot resolve "canvas" from "/home/projects/aoniabybg.github/node_modules/jsdom/lib/jsdom/utils.js" and externals are not allowed!


undefined


[0:38:42]  ERROR  Cannot resolve "canvas" from "/home/projects/aoniabybg.github/node_modules/jsdom/lib/jsdom/utils.js" and externals are not allowed!

  at resolveId (node_modules/nitropack/dist/shared/nitro.4ea992bc.mjs:2005:17) 



[0:38:42]  ERROR  Cannot resolve "canvas" from "/home/projects/aoniabybg.github/node_modules/jsdom/lib/jsdom/utils.js" and externals are not allowed!


~/projects/aoniabybg.github 16s

But in my custom project it complains about different libs:

[nitro 12:47:50 AM]  ERROR  Error: Cannot resolve "pnpapi" from "/Users/Bobik/Docker/thebeast/node_modules/esbuild/lib/main.js" and externals are not allowed!


undefined


[12:47:50 AM]  ERROR  Cannot resolve "pnpapi" from "/Users/Bobik/Docker/thebeast/node_modules/esbuild/lib/main.js" and externals are not allowed!

  at Object.resolveId (node_modules/nitropack/dist/shared/nitro.4ea992bc.mjs:1973:17)
  at async PluginDriver.hookFirstAndGetPlugin (node_modules/rollup/dist/es/shared/node-entry.js:18539:28)
  at async resolveId (node_modules/rollup/dist/es/shared/node-entry.js:17208:26)
  at async ModuleLoader.resolveId (node_modules/rollup/dist/es/shared/node-entry.js:17622:15)
  at async node_modules/@rollup/plugin-commonjs/dist/es/index.js:785:16
  at async Promise.all (index 3)
  at async node_modules/@rollup/plugin-commonjs/dist/es/index.js:777:32
  at async rewriteRequireExpressionsAndGetImportBlock (node_modules/@rollup/plugin-commonjs/dist/es/index.js:1354:28)
  at async transformCommonjs (node_modules/@rollup/plugin-commonjs/dist/es/index.js:1928:23)
  at async transform (node_modules/rollup/dist/es/shared/node-entry.js:17540:16) 



[12:47:50 AM]  ERROR  Cannot resolve "pnpapi" from "/Users/Bobik/Docker/thebeast/node_modules/esbuild/lib/main.js" and externals are not allowed!

Hello everyone 👋

First of all thank you for all of your hard work on the module. I think the idea behind it is absolutely amazing!

Inside my project, I am using the official NuxtJS Module for i18n (https://i18n.nuxtjs.org/). As our translations have gotten pretty long, we have decided to move our translations into separate JSON files to better handle the different locales. (~/locales/en.json etc.).

For the integration of the Nuxt i18n, we can then pass an array of locales, along with the location of the JSON.

{
  i18n: {
    langDir: 'locales',
    locales: [{ name: 'English', code: 'en', file: 'en.json' }],
    defaultLocale: 'en',
  },
}

These are then used by the module (which under the hood runs vue-i18n). The issue I am facing now is how to also pass these JSON to the Nuxt Vue-Email module. Based on the documentation, it seems like these currently need to be set via the nuxt.config.ts. Do you have any recommendations on how we can best handle our use case?

What I have tried

• Directly importing the JSON into the Nuxt Config (sadly does not work, as it fails due to maximum stack size being exceeded).
• Linking our external i18n.config.ts which is used to configure the vuei18n options. In theory we can also set the messages here, so this could resolve the issue, however I can see no way to refer to an external i18n config inside this module

We would love to be able to adopt this into our projects, but sadly this is currently blocking us! Would love to hear your input and tips 🥰

Reproduction

I have created a minimal reproduction of our project setup, so you get a better idea, of what we currently have setup. Maybe this can help you give us some pointers 🙏

https://stackblitz.com/edit/github-cgzqmr?file=nuxt.config.ts

Context

NuxtI18n injects a vue-i18n instance into your Node application. This cannot be accessed on the server side. They do however offer solutions to use the translations server-side, so this may be worth looking into, if it can resolve this issue? https://i18n.nuxtjs.org/docs/guide/server-side-translations

This issue was a debug in progress, i'm jotting down notes here while testing/debugging, might even close this later tonight when I discover I'm just doing something wrong here 👀 updates are below

So I build multiple Nuxt websites via Jenkins on a M1 Mac Mini.. and from there only deploy the .output folder from Nuxt, this is why i love nuxt, keeps is small and deploys fast.

But, and i don't know if i'm at the correct place at thuis moment to share this...
it turns out building on an ARM machine and hosting the .output on a x86 machine breaks the useCompiler in Nuxt with the following error from ESBuild.

this issue goes away when i run nuxt locally or build and run on server.

Error loading component Error:
You installed esbuild for another platform than the one you're currently using.
This won't work because esbuild is written with native code and needs to
install a platform-specific binary executable.

Specifically the "esbuild-linux-arm64" package is present but this platform
needs the "esbuild-linux-64" package instead. People often get into this
situation by installing esbuild on Windows or macOS and copying "node_modules"
into a Docker image that runs Linux, or by copying "node_modules" between
Windows and WSL environments.

If you are installing with npm, you can try not copying the "node_modules"
directory when you copy the files over, and running "npm ci" or "npm install"
on the destination platform after the copy. Or you could consider using yarn
instead of npm which has built-in support for installing a package on multiple
platforms simultaneously.

If you are installing with yarn, you can try listing both this platform and the
other platform in your ".yarnrc.yml" file using the "supportedArchitectures"
feature: https://yarnpkg.com/configuration/yarnrc/#supportedArchitectures
Keep in mind that this means multiple copies of esbuild will be present.

Another alternative is to use the "esbuild-wasm" package instead, which works
the same way on all platforms. But it comes with a heavy performance cost and
can sometimes be 10x slower than the "esbuild" package, so you may also not
want to do that.

Unable to find the email template file

Error: Error rendering template Droppingsoon: Error: Component Droppingsoon not found
    at templateRender (file:///home/xxxxx/xxxxx/.output/server/node_modules/@vue-email/compiler/dist/index.mjs:57013:11)
    at useCompiler (file:///home/xxxxx/xxxxx/.output/server/chunks/sendMail.post.mjs:31:20)
    at file:///home/xxxxx/xxxxx/.output/server/chunks/sendMail.post.mjs:47:22
    at Object.handler (file:///home/xxxxx/xxxxx/.output/server/chunks/nitro/node-server.mjs:2378:19)
    at toNodeHandle (file:///home/xxxxx/xxxxx/.output/server/chunks/nitro/node-server.mjs:2567:7)
    at ufetch (file:///home/xxxxx/xxxxx/.output/server/chunks/nitro/node-server.mjs:2933:17)
    at $fetchRaw2 (file:///home/xxxxx/xxxxx/.output/server/chunks/nitro/node-server.mjs:2805:26)
    at $fetch2 (file:///home/xxxxx/xxxxx/.output/server/chunks/nitro/node-server.mjs:2847:15)
    at file:///home/xxxxx/xxxxx/server/api/droppingsoon/index.post.js:76:1
    at Object.handler (file:///home/xxxxx/xxxxx/.output/server/chunks/nitro/node-server.mjs:2378:19)
    at Server.toNodeHandle (file:///home/xxxxx/xxxxx/.output/server/chunks/nitro/node-server.mjs:2567:7)

update1: Tried with yarn, no bueno. Almost sure this isn't because of vue-mail, but could be a vite thing when dynamicly trying to load the template.

update2: -Trying to force esbuild to esbuild-wasm dirty aliassing trick-. that was dumb.

update3: wasm thingy failed, i'm a bit more sure about vue-mail. When removing vue-mail, there is no esbuild included in /.output/server/package.json and when i add vue-mail again its back "esbuild": "0.15.18",

ok it is 100% pinpointed to the following dependancy.

/@vue-email/[email protected]
 - import-string
 -- module-from-string
 --- esbuild: 0.15.18

Conclusion

Building Nuxt projects on an ARM-based machine (Machine A) and deploying the .output folder to an Intel/x86-based machine (Machine B) leads to compatibility issues with the email compiler in Nuxt. This problem arises because the compiler uses import-string, which seems to depend on esbuild?, a tool not compatible across different architectures. The presence of esbuild within the .output/server/modules appears to be the core issue. Attempts to resolve this through methods such as using yarn were unsuccessful, underscoring the problem's specificity to the @vue-email/compiler dependency and its use of esbuild. Furthermore, this situation suggests that Nuxt is not designed to handle architecture-dependent dependencies within its build output, as their presence can lead to such cross-architecture deployment issues.

Environment

• OS: macOS Sonoma 14.2.1
• Node: v18.18.2
• pnpm: 8.13.1

Package deps

• Nuxt: 3.9.0
• vue: 3.4.5
• vue-email/nuxt: 0.8.7

Issue description

The vue-email/nuxt works great when I'm running pnpm dev. As soon I do pnpm build && pnpm start I see the error in console:

Error loading component node:internal/modules/cjs/loader:573
      throw e;
      ^

Error: Cannot find module '/Users/vo1/Developer/vue-email-repro-missing-component/vue-email-repro-missing-component/.output/server/node_modules/vue-email/dist/index.cjs'
    at createEsmNotFoundErr (node:internal/modules/cjs/loader:1098:15)
    at finalizeEsmResolution (node:internal/modules/cjs/loader:1091:15)
    at resolveExports (node:internal/modules/cjs/loader:567:14)
    at Module._findPath (node:internal/modules/cjs/loader:636:31)
    at Module._resolveFilename (node:internal/modules/cjs/loader:1063:27)
    at Module._load (node:internal/modules/cjs/loader:922:27)
    at Module.require (node:internal/modules/cjs/loader:1143:19)
    at require (node:internal/modules/cjs/helpers:119:18)
    at /Users/vo1/Developer/vue-email-repro-missing-component/vue-email-repro-missing-component/.output/server/node_modules/import-string/dist/wlflv5w9v8m5WT2r6LTqd.js:36:24
    at Script.runInContext (node:vm:135:12) {
  code: 'MODULE_NOT_FOUND',
  path: '/Users/vo1/Developer/vue-email-repro-missing-component/vue-email-repro-missing-component/.output/server/node_modules/vue-email/package.json'
}
[nuxt] [request error] [unhandled] [500] Error rendering template Test: Error: Component Test not found
  at templateRender (./server/node_modules/@vue-email/compiler/dist/index.mjs:57013:11)  
  at async useCompiler (./server/chunks/generate.post.mjs:27:20)  
  at async ./server/chunks/generate.post.mjs:39:20  
  at async Object.handler (./server/chunks/nitro/node-server.mjs:2203:19)  
  at async toNodeHandle (./server/chunks/nitro/node-server.mjs:2392:7)  
  at async ufetch (./server/chunks/nitro/node-server.mjs:2758:17)  
  at async $fetchRaw2 (./server/chunks/nitro/node-server.mjs:2630:26)  
  at async $fetch2 (./server/chunks/nitro/node-server.mjs:2672:15)  
  at async setup (./server/chunks/app/server.mjs:810:19)

Minimal repo is attached for repro.
vue-email-repro-missing-component.zip

Running a simple email compilation, using this exact example code:

// server/api/send-email.post.ts
import { Resend } from 'resend'
import { useCompiler } from '#vue-email'

const resend = new Resend('RESEND_KEY')

export default defineEventHandler(async (event) => {
  const template = await useCompiler('SuccessEmail.vue', {
    props: {
      url: 'https://vuemail.net/',
    }
  })

  const options = {
    from: '[email protected]',
    to: '[email protected]',
    subject: 'hello world',
    html: template.html,
  }

  await resend.emails.send(options)
  return { message: 'Email sent' }
})

I have my SuccessEmail.vue located in ~/emails

Currently this all works on dev. However, when deploying to netlify, when the server function runs I'm returned with this error server-side:

Mar 8, 03:41:07 PM: 7cf8b042 ERROR  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)Mar 8, 03:41:07 PM: 7cf8b042 

ERROR  [nuxt] [request error] [unhandled] [500] Error rendering template SuccessEmail: Error: Component SuccessEmail not found
  at templateRender (./node_modules/@vue-email/compiler/dist/index.mjs:57021:11)  
  at async useCompiler (./chunks/routes/api/send-email.post.mjs:30:20)  
  at async Object.handler (./chunks/routes/api/send-email.post.mjs:49:20)  
  at async Object.handler (./chunks/runtime.mjs:2980:19)  
  at async toNodeHandle (./chunks/runtime.mjs:3246:7)  
  at async ufetch (./chunks/runtime.mjs:3973:17)  
  at async $fetchRaw2 (./chunks/runtime.mjs:3845:26)  
  at async $fetch2 (./chunks/runtime.mjs:3887:15)  
  at async Object.handler (./chunks/routes/api/sweepstakes-form-submit.mjs:54:5)  
  at async Object.handler (./chunks/runtime.mjs:2980:19)

I'm not certain the esbuild error effects this, but I'm not certain why my SuccessEmail component isn't being found.

I can see it in my deployed files:

Here's my nuxt.config file:

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    '@vue-email/nuxt',
  ],
  css: ['@/assets/css/fonts.css'],
  vueEmail: {
    autoImport: false,
    baseUrl: 'BASE_URL'
  },
})

Actual Behavior

Nuxt DevTools only show white page and error Uncaught ReferenceError: __NUXT_ASYNC_CONTEXT__ is not defined is shown in browser console

Expected Behavior

Nuxt DevTools work without error

Reproduction

https://stackblitz.com/edit/nuxt-starter-wvxxjo?file=nuxt.config.ts

Dependencies

 "nuxt": "^3.9.3",
  "@vue-email/nuxt": "^0.8.10"

I'm trying to run the latest vue-email (0.8.5) and the latest vue-email/nuxt plugin (0.8.7) with latest Nuxt (3.9.0), but I'm getting this error: ERROR Nuxt module should be a function: vue-email/nuxt. How can I fix this?

Clean install out of the box error

` ERROR Transform failed with 24 errors: 3:21:22 PM
/home/batihandev/projects/vue-email-issue/.nuxt/dist/server/_nuxt/TestEmail-BlAM1Mlq.js:6026:15: ERROR: Big integer literals are not available in the configured target environment ("es2019")
/home/batihandev/projects/vue-email-issue/.nuxt/dist/server/_nuxt/TestEmail-BlAM1Mlq.js:6026:27: ERROR: Big integer literals are not available in the configured target environment ("es2019")
/home/batihandev/projects/vue-email-issue/.nuxt/dist/server/_nuxt/TestEmail-BlAM1Mlq.js:6029:11: ERROR: Big integer literals are not available in the configured target environment ("es2019")
/home/batihandev/projects/vue-email-issue/.nuxt/dist/server/_nuxt/TestEmail-BlAM1Mlq.js:6029:20: ERROR: Big integer literals are not available in the configured target environment ("es2019")
/home/batihandev/projects/vue-email-issue/.nuxt/dist/server/_nuxt/TestEmail-BlAM1Mlq.js:6036:31: ERROR: Big integer literals are not available in the configured target environment ("es2019")
...

.nuxt/dist/server/_nuxt/TestEmail-BlAM1Mlq.js:6026:15: ERROR: Big integer literals are not available in the configured target environment ("es2019")
.nuxt/dist/server/_nuxt/TestEmail-BlAM1Mlq.js:6026:27: ERROR: Big integer literals are not available in the configured target environment ("es2019")
.nuxt/dist/server/_nuxt/TestEmail-BlAM1Mlq.js:6029:11: ERROR: Big integer literals are not available in the configured target environment ("es2019")
.nuxt/dist/server/_nuxt/TestEmail-BlAM1Mlq.js:6029:20: ERROR: Big integer literals are not available in the configured target environment ("es2019")
.nuxt/dist/server/_nuxt/TestEmail-BlAM1Mlq.js:6036:31: ERROR: Big integer literals are not available in the configured target environment ("es2019")
...
at failureErrorWithLog (node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1651:15)
at node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:849:29
at responseCallbacks. (node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:704:9)
at handleIncomingPacket (node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:764:9)
at Socket.readFromStdout (node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:680:7)
at Socket.emit (node:events:519:28)
at addChunk (node:internal/streams/readable:559:12)
at readableAddChunkPushByteMode (node:internal/streams/readable:510:3)
at Readable.push (node:internal/streams/readable:390:5)
at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)

`

And if i fix this issue with nuxt config then i will get this error when using test api.

// this fixes build error but breaks the email rendering
// also not recommended for production
nitro: {
esbuild: {
options: {
target: "esnext",
},
},
},

Error loading component TypeError: source.startsWith is not a function at startsWith (file:///home/batihandev/jobs/space-clicker/nuxtjs/.output/server/node_modules/@vue-email/compiler/dist/index.mjs:16170:17) at isEnd (file:///home/batihandev/jobs/space-clicker/nuxtjs/.output/server/node_modules/@vue-email/compiler/dist/index.mjs:16207:11) at parseChildren (file:///home/batihandev/jobs/space-clicker/nuxtjs/.output/server/node_modules/@vue-email/compiler/dist/index.mjs:15596:11) at baseParse (file:///home/batihandev/jobs/space-clicker/nuxtjs/.output/server/node_modules/@vue-email/compiler/dist/index.mjs:15570:5) at Object.parse$8 [as parse] (file:///home/batihandev/jobs/space-clicker/nuxtjs/.output/server/node_modules/@vue-email/compiler/dist/index.mjs:26406:10) at parse$7 (file:///home/batihandev/jobs/space-clicker/nuxtjs/.output/server/node_modules/@vue-email/compiler/dist/index.mjs:27428:24) at compile (file:///home/batihandev/jobs/space-clicker/nuxtjs/.output/server/node_modules/@vue-email/compiler/dist/index.mjs:57044:34) at loadComponent (file:///home/batihandev/jobs/space-clicker/nuxtjs/.output/server/node_modules/@vue-email/compiler/dist/index.mjs:57030:31) at templateRender (file:///home/batihandev/jobs/space-clicker/nuxtjs/.output/server/node_modules/@vue-email/compiler/dist/index.mjs:56968:29) at useCompiler (file:///home/batihandev/jobs/space-clicker/nuxtjs/.output/server/chunks/_/useCompiler.mjs:21:26) Error: Error rendering template TestEmail: Error: Component TestEmail not found at templateRender (file:///home/batihandev/jobs/space-clicker/nuxtjs/.output/server/node_modules/@vue-email/compiler/dist/index.mjs:57021:11) at async useCompiler (file:///home/batihandev/jobs/space-clicker/nuxtjs/.output/server/chunks/_/useCompiler.mjs:21:20) at async Object.handler (file:///home/batihandev/jobs/space-clicker/nuxtjs/.output/server/chunks/routes/api/mail.get.mjs:22:22) at async Object.handler (file:///home/batihandev/jobs/space-clicker/nuxtjs/.output/server/chunks/runtime.mjs:3044:19) at async Server.toNodeHandle (file:///home/batihandev/jobs/space-clicker/nuxtjs/.output/server/chunks/runtime.mjs:3310:7)

I followed introductions here https://vuemail.net/ssr/nuxt
It works in dev mode. Will get rendering error if nitro es2020 set. Else build fails with the top error.
I would like to know whats giving that big-integer error.
Nice project!
Here is a reproduction: https://github.com/batihandev/ven-reproduction

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: '[email protected]',
      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)

Hi,

I've recently tried to update my Nuxt app which was using the vue-email package and the vue-email/nuxt module to @vue-mail/nuxt which I figure is the offical package now according to the docs.

However, this breaks rendering of email components, specifically type imports which had been no issue before.

<script setup lang="ts">
import type { IRegistration } from '~/lib/forms'

defineProps<IRegistration>()

// ...
</script>

Rendering is done server-side:

import { useCompiler } from '#vue-email'

export default defineEventHandler(async (event) => {
  // getting sender, name and props from event.context ...

  const body = await useCompiler('Registration.vue', { props })

  await send({
    from: { ...sender, name },
    replyTo: { name, address: email },
    subject: 'New Registration',
    ...body,
  })
})

This fails with:

Registration
4  |  import type { IRegistration } from '~/lib/forms'
5  |  
6  |  defineProps<IRegistration>()
   |              ^^^^^^^^^^^^^
7  |  
8  |  const has = (value: any) => !isEmpty(value)
    at ScriptCompileContext.error (file:///Users/andreas/Projects/marionroehrig-nuxt3/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@vue-email/compiler/dist/index.mjs:47004:11)
    at importSourceToScope (file:///Users/andreas/Projects/marionroehrig-nuxt3/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@vue-email/compiler/dist/index.mjs:47566:16)
    at resolveTypeFromImport (file:///Users/andreas/Projects/marionroehrig-nuxt3/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@vue-email/compiler/dist/index.mjs:47560:23)
    at innerResolveTypeReference (file:///Users/andreas/Projects/marionroehrig-nuxt3/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@vue-email/compiler/dist/index.mjs:47470:14)
    at resolveTypeReference (file:///Users/andreas/Projects/marionroehrig-nuxt3/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@vue-email/compiler/dist/index.mjs:47459:36)
    at innerResolveTypeElements (file:///Users/andreas/Projects/marionroehrig-nuxt3/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@vue-email/compiler/dist/index.mjs:47114:24)
    at resolveTypeElements (file:///Users/andreas/Projects/marionroehrig-nuxt3/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@vue-email/compiler/dist/index.mjs:47071:35)
    at resolveRuntimePropsFromType (file:///Users/andreas/Projects/marionroehrig-nuxt3/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@vue-email/compiler/dist/index.mjs:48396:20)
    at genRuntimePropsFromTypes (file:///Users/andreas/Projects/marionroehrig-nuxt3/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@vue-email/compiler/dist/index.mjs:48372:17)
    at genRuntimeProps (file:///Users/andreas/Projects/marionroehrig-nuxt3/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@vue-email/compiler/dist/index.mjs:48362:18)
[nuxt] [request error] [unhandled] [500] The "chunk" argument must be of type string or an instance of Buffer or Uint8Array. Received an instance of Object
  at __node_internal_captureLargerStackTrace (node:internal/errors:496:5)  
  at new NodeError (node:internal/errors:405:5)  
  at _write (node:internal/streams/writable:322:13)  
  at Writable.end (node:internal/streams/writable:619:17)  
  at Immediate.<anonymous> (./node_modules/.pnpm/[email protected]/node_modules/nodemailer/lib/mime-node/index.js:988:35)  
  at process.processImmediate (node:internal/timers:478:21)

HI - I posted a comment on the related issue: #13. Creating a new issue just in case you don't get notified of comments on a closed issue.

@Flowko Hi. First, thank you for your work on this module!

I'm looking into a similar issue (to #13) and it has not been solved by upgrading to 0.8.8, which was the proposed solution.
I'm also seeing that the stackblitz linked in that issue (https://stackblitz.com/edit/github-usvs6j-5oeyxy?file=package.json,emails%2Ftest.vue,nuxt.config.ts) still has the same error, even with the updated version.
(If that link isn't adequate I can look into creating a separate stackblitz soon)

Could you please advise?
Thanks in advance

I previously raised an issue at #11 and subsequently closed it, believing the problem originated from my deployment method via Jenkins. However, I now suspect there might indeed be an error.

15|*****-nl-website  | Error loading component Error: The package "esbuild-linux-64" could not be found, and is needed by esbuild.
15|*****-nl-website  | If you are installing esbuild with npm, make sure that you don't specify the
15|*****-nl-website  | "--no-optional" or "--omit=optional" flags. The "optionalDependencies" feature
15|*****-nl-website  | of "package.json" is used by esbuild to install the correct binary executable
15|*****-nl-website  | for your current platform.
15|**** |     at generateBinPath (/home/****/****.nl/releases/frontend/release-****/server/node_modules/esbuild/lib/main.js:1819:15)
15|**** |     at esbuildCommandAndArgs (/home/****/****.nl/releases/frontend/release-****/server/node_modules/esbuild/lib/main.js:1886:33)
15|**** |     at ensureServiceIsRunning (/home/****/****.nl/releases/frontend/release-****/server/node_modules/esbuild/lib/main.js:2051:25)
15|**** |     at startSyncServiceWorker (/home/****/****.nl/releases/frontend/release-****/server/node_modules/esbuild/lib/main.js:2261:19)
15|**** |     at Object.<anonymous> (/home/****/****.nl/releases/frontend/release-****/server/node_modules/esbuild/lib/main.js:2302:3)
15|**** |     at Module._compile (node:internal/modules/cjs/loader:1241:14)
15|**** |     at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
15|**** |     at Module.load (node:internal/modules/cjs/loader:1091:32)
15|**** |     at Module._load (node:internal/modules/cjs/loader:938:12)
15|**** |     at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12)

I am executing the build on the server and subsequently relocating the .output folder. My understanding is that this should be a feasible deployment method for Nuxt, meaning the initial node_modules should not be necessary, correct? Ideally, everything required should be contained within the build's .output.

My apologies for directly addressing you here, @danielroe. In this domain, you possess the magic wizard expertise, and I would greatly appreciate your insights on whether my approach is flawed.

Reproduction Steps:

• Install Nuxt, configure vue-mail.
• Execute npm run build, then either move the .output folder or delete node_modules.
• Attempt to render an email template.