search

vue-email / nuxt

💚 Official Nuxt module for Vue Email. Build email templates with Vue components.
https://vuemail.net/getting-started/nuxt-nitro
MIT License
108 stars 3 forks source link

[Feature] Support edge runtimes #2

Closed v-moravec closed 1 month ago

v-moravec commented 8 months ago

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: image On Vercel Severless: image

iBobik commented 7 months ago

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

v-moravec commented 7 months ago

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') }} info@ldseating.com
      </e-text>
    </template>
  </Base>
</template>

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

v-moravec commented 7 months ago

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

v-moravec commented 7 months ago

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.

image

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/@vue+compiler-sfc@3.3.4/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js" and externals are not allowed!
Flowko commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

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/tough-cookie@4.1.3/node_modules/tough-cookie/lib/cookie.js using exports defined in /Users/vojtechmoravec/WebstormProjects/vue-email-edge-test/node_modules/.pnpm/unenv@1.8.0/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/esbuild@0.15.18/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/esbuild@0.15.18/node_modules/esbuild/lib/main.js" and externals are not allowed!

  at Object.resolveId (node_modules/.pnpm/nitropack@2.8.1/node_modules/nitropack/dist/shared/nitro.4ea992bc.mjs:1973:17)
  at async PluginDriver.hookFirstAndGetPlugin (node_modules/.pnpm/rollup@4.9.0/node_modules/rollup/dist/es/shared/node-entry.js:18537:28)
  at async resolveId (node_modules/.pnpm/rollup@4.9.0/node_modules/rollup/dist/es/shared/node-entry.js:17206:26)
  at async ModuleLoader.resolveId (node_modules/.pnpm/rollup@4.9.0/node_modules/rollup/dist/es/shared/node-entry.js:17620:15)
  at async node_modules/.pnpm/@rollup+plugin-commonjs@25.0.7_rollup@4.9.0/node_modules/@rollup/plugin-commonjs/dist/es/index.js:785:16
  at async Promise.all (index 3)
  at async node_modules/.pnpm/@rollup+plugin-commonjs@25.0.7_rollup@4.9.0/node_modules/@rollup/plugin-commonjs/dist/es/index.js:777:32
  at async rewriteRequireExpressionsAndGetImportBlock (node_modules/.pnpm/@rollup+plugin-commonjs@25.0.7_rollup@4.9.0/node_modules/@rollup/plugin-commonjs/dist/es/index.js:1354:28)
  at async transformCommonjs (node_modules/.pnpm/@rollup+plugin-commonjs@25.0.7_rollup@4.9.0/node_modules/@rollup/plugin-commonjs/dist/es/index.js:1928:23)
  at async transform (node_modules/.pnpm/rollup@4.9.0/node_modules/rollup/dist/es/shared/node-entry.js:17538:16)
  at async ModuleLoader.addModuleSource (node_modules/.pnpm/rollup@4.9.0/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/esbuild@0.15.18/node_modules/esbuild/lib/main.js" and externals are not allowed!

 ELIFECYCLE  Command failed with exit code 1.
Flowko commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

so does it work without vue-email ?

v-moravec commented 7 months ago

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 commented 7 months ago

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

jose-madriz-wt commented 6 months ago

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 commented 6 months ago

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 commented 5 months ago

Got the same issue when deployed to cloudflare-pages.

"Error: Cannot resolve "pnpapi" from "/opt/buildhome/repo/node_modules/.pnpm/esbuild@0.15.18/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 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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 commented 2 months ago

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

Flowko commented 1 month ago

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