[Feature] Support edge runtimes

[v-moravec]

trafficstars

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:

[iBobik]

How is it send exactly? Can you send here whole message source? (Version send from localhost and from Vercel.)

[v-moravec]

You can look at the source compiled by vueemail here - https://ldseating.vercel.app/api/email/registration

API endpoint looks like this:

import { useCompiler } from '#vue-email'

export default defineEventHandler(async (event) => {
  const locale = getHeader(event, 'Accept-Language')

  return await useCompiler('Registration.vue', {
    i18n: { defaultLocale: typeof locale === 'string' ? locale : 'en' },
  })
})

And template looks like this:

<template>
  <Base
    :heading="$t('registration.title')"
    :preview-text="$t('registration.title')"
  >
    <template>
      <e-text class="text-[14px] leading-[24px] text-black">
        {{ $t('base.greetings') }}
      </e-text>
      <e-text class="text-[14px] leading-[24px] text-black">
        {{ $t('registration.content') }}
      </e-text>
      <e-text class="text-[14px] leading-[24px] text-black">
        {{ $t('registration.warning') }} [email protected]
      </e-text>
    </template>
  </Base>
</template>

Directory structure - all templates are in /emails folder as well as the base wrapper.

[v-moravec]

Well, sometimes the function even crashes. I'm getting a lot of 500 right now.

[v-moravec]

I found some errors in logs:

Error loading component Error: [@vue/compiler-sfc] Failed to resolve import source "~/emails/types".

Base
50 |  import { BaseProps } from '~/emails/types'
51 |  
52 |  const props = defineProps<BaseProps>()
   |                            ^^^^^^^^^
53 |  </script>
54 |  
    at ScriptCompileContext.error (/var/task/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:15841:11)
    at importSourceToScope (/var/task/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18428:16)
    at resolveTypeFromImport (/var/task/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18393:23)
    at innerResolveTypeReference (/var/task/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18299:14)
    at resolveTypeReference (/var/task/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18288:36)
    at innerResolveTypeElements (/var/task/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17945:24)
    at resolveTypeElements (/var/task/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17902:35)
    at resolveRuntimePropsFromType (/var/task/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19312:20)
    at genRuntimePropsFromTypes (/var/task/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19288:17)
    at genRuntimeProps (/var/task/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19278:18)

But there are multiple errors - all connected with types, which is weird, because the template I'm trying to use should only need BaseProps.

Here is the error when building with vercel-edge preset (the same happens with cloudflare-pages preset):

 ERROR  Cannot resolve "react-dom/server" from "/Users/vojtechmoravec/WebstormProjects/LD_Seating/ld-seating-next/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js" and externals are not allowed!

[Flowko]

importing types is not supported yet, you need to have that type inside the email template you wanna use, till we add that, thats the only solution for now

[v-moravec]

I made a minimal reproduction - https://github.com/v-moravec/vue-email-edge. It is not possible to build for CF Pages and Vercel Edge. Even without the types. @Flowko

[Flowko]

Thanks for the reproduction, rn we are working on moving the repo to an organization and split the packages, to make it easier to fix bugs, but we will do check this

[Flowko]

hi @v-moravec can you please try "@vue-email/nuxt": "0.8.3" also remove vue-email package from the dependencies you wont need that, also in nuxt.config.ts you can remove nitro: { preset: "cloudflare-pages" }, as that will be automaitcly handled by nitro when you deploy, also added some props to the email u can check what i did here: https://github.com/Flowko/vue-email-edge-test

also it seems to be working fine: Vercel: ( pnpm build ) https://vue-email-edge-test.vercel.app/api/email

[v-moravec]

Hi, everything seems to be working now, thank you very much. I had some issues, but it seems it was caused by running old version of Nuxt - 3.7.4, after updating to 3.8.2 everything works as expected.

[v-moravec]

My bad, I tried to build it with wrong preset. We are deploying from Gitlab runner, so I have to specify the Nitro preset. Now I switched to vercel-edge and I'm getting this error:

ℹ Building Nitro Server (preset: vercel-edge)                                                                                    nitro 4:35:04 PM
(node-resolve plugin) Could not resolve import "unenv/runtime/mock/proxy-cjs/" in /Users/vojtechmoravec/WebstormProjects/vue-email-edge-test/node_modules/.pnpm/[email protected]/node_modules/tough-cookie/lib/cookie.js using exports defined in /Users/vojtechmoravec/WebstormProjects/vue-email-edge-test/node_modules/.pnpm/[email protected]/node_modules/unenv/package.json.
(node:11945) [DEP0155] DeprecationWarning: Use of deprecated trailing slash pattern mapping "./runtime/mock/proxy-cjs/" in the "exports" field module resolution of the package at /Users/vojtechmoravec/WebstormProjects/vue-email-edge-test/node_modules/unenv/package.json imported from /Users/vojtechmoravec/WebstormProjects/vue-email-edge-test/node_modules. Mapping specifiers ending in "/" is no longer supported.
(Use `node --trace-deprecation ...` to show where the warning was created)

[nitro 4:35:08 PM]  ERROR  Error: Cannot resolve "pnpapi" from "/Users/vojtechmoravec/WebstormProjects/vue-email-edge-test/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js" and externals are not allowed!


undefined


[4:35:08 PM]  ERROR  Cannot resolve "pnpapi" from "/Users/vojtechmoravec/WebstormProjects/vue-email-edge-test/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js" and externals are not allowed!

  at Object.resolveId (node_modules/.pnpm/[email protected]/node_modules/nitropack/dist/shared/nitro.4ea992bc.mjs:1973:17)
  at async PluginDriver.hookFirstAndGetPlugin (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:18537:28)
  at async resolveId (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:17206:26)
  at async ModuleLoader.resolveId (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:17620:15)
  at async node_modules/.pnpm/@[email protected][email protected]/node_modules/@rollup/plugin-commonjs/dist/es/index.js:785:16
  at async Promise.all (index 3)
  at async node_modules/.pnpm/@[email protected][email protected]/node_modules/@rollup/plugin-commonjs/dist/es/index.js:777:32
  at async rewriteRequireExpressionsAndGetImportBlock (node_modules/.pnpm/@[email protected][email protected]/node_modules/@rollup/plugin-commonjs/dist/es/index.js:1354:28)
  at async transformCommonjs (node_modules/.pnpm/@[email protected][email protected]/node_modules/@rollup/plugin-commonjs/dist/es/index.js:1928:23)
  at async transform (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:17538:16)
  at async ModuleLoader.addModuleSource (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:17755:36) 



[4:35:08 PM]  ERROR  Cannot resolve "pnpapi" from "/Users/vojtechmoravec/WebstormProjects/vue-email-edge-test/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js" and externals are not allowed!

 ELIFECYCLE  Command failed with exit code 1.

[Flowko]

Hmm, i dont think thats related to vue-email, could u please remove it and deploy without it ? Just wanna make sure its what causing that issue

[v-moravec]

Oh, I see. The problem is, that when you removed the preset, Vercel defaults to vercel preset. Which means you are deploying to Node environment and not to CF Workers environment - that's the reason your deployment to CF failed and deployment to Vercel didn't.

[Flowko]

so does it work without vue-email ?

[v-moravec]

Correct, when I remove vue-email module from nuxt and EP which calls it, I can successfully deploy to both vercel-edge and cloudflare-pages (since it's basically the same environment).

[Flowko]

okay thanks, ill try to go deeper into this and see whats causing that

[jose-madriz-wt]

Hi, @Flowko! I was getting the same issue, removed the vue-email package and got this:

Internal server error: Failed to resolve import "vue-email" from "pages\mail\invitation.vue". Does the file exist? Plugin: vite:import-analysis File:.../pages/mail/invitation.vue:1:28 1 | import { useRender } from 'vue-email';

Should I keep vue-email to be able to preview emails in page? I noticed the plugin does auto import that.. But I can assure you vite is creating that import statement. I presume from the nuxt plugin auto-import.

[Flowko]

hi @jose-madriz-wt do you happen to have a reproduction for this ? would help me debug

from what i see, you dont have to install vue-email as @vue-email/nuxt auto imports vue-email utilities, make sure you have autoImport: true check https://vuemail.net/ssr/nuxt#options and dont try to import manually, cus its auto imported, so remove import { useRender } from 'vue-email'; just directly use useRender

[KevinCocquyt39]

Got the same issue when deployed to cloudflare-pages.

"Error: Cannot resolve "pnpapi" from "/opt/buildhome/repo/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js" and externals are not allowed!"

I have Nuxt v3.10 Only installed @vue-email/nuxt (so no vue-email). Module is included: "@vue-email/nuxt"

A mail is created using useCompiler (per the docs) and is known by importing it (import { useCompiler } from "#vue-email"). When I do not import it like that, the application gives a "function does not exist" exception. It's not imported automatically. UseRender does not seem to exist at all?

[Flowko]

useCompiler is not auto imported, you need to import that, i was talking about Jose issue related to auto importing composables from vue-email, for you, thats an issue im well aware of, the library does not yet support edge runtimes, so it wont work in either cloudflare pages or vercel edge

[DavidDeSloovere]

To be clear, vue-email has not support for edge runtimes, or is it the nuxt package for vue-email ? Edit: or the compiler package?

We would also love to see edge runtimes support, because this is a great library and we want to use it everywhere.

[Flowko]

its the complier, its what the nuxt package uses, yeah i would love to see that working as well, but yeah, till that happens will keep this issue open

[ReWWeR]

any updates on this? Or does anyone know how to bypass that?

[Flowko]

we just merged a new project rewrite, please do check the docs and the updated logic https://vuemail.net/