[Nuxt] Updating from vue-emai to @vue-email/nuxt breaks email rendering

[juni0r]

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/@vue-email+compiler@0.8.10_typescript@5.3.3_vue@3.4.15/node_modules/@vue-email/compiler/dist/index.mjs:47004:11)
    at importSourceToScope (file:///Users/andreas/Projects/marionroehrig-nuxt3/node_modules/.pnpm/@vue-email+compiler@0.8.10_typescript@5.3.3_vue@3.4.15/node_modules/@vue-email/compiler/dist/index.mjs:47566:16)
    at resolveTypeFromImport (file:///Users/andreas/Projects/marionroehrig-nuxt3/node_modules/.pnpm/@vue-email+compiler@0.8.10_typescript@5.3.3_vue@3.4.15/node_modules/@vue-email/compiler/dist/index.mjs:47560:23)
    at innerResolveTypeReference (file:///Users/andreas/Projects/marionroehrig-nuxt3/node_modules/.pnpm/@vue-email+compiler@0.8.10_typescript@5.3.3_vue@3.4.15/node_modules/@vue-email/compiler/dist/index.mjs:47470:14)
    at resolveTypeReference (file:///Users/andreas/Projects/marionroehrig-nuxt3/node_modules/.pnpm/@vue-email+compiler@0.8.10_typescript@5.3.3_vue@3.4.15/node_modules/@vue-email/compiler/dist/index.mjs:47459:36)
    at innerResolveTypeElements (file:///Users/andreas/Projects/marionroehrig-nuxt3/node_modules/.pnpm/@vue-email+compiler@0.8.10_typescript@5.3.3_vue@3.4.15/node_modules/@vue-email/compiler/dist/index.mjs:47114:24)
    at resolveTypeElements (file:///Users/andreas/Projects/marionroehrig-nuxt3/node_modules/.pnpm/@vue-email+compiler@0.8.10_typescript@5.3.3_vue@3.4.15/node_modules/@vue-email/compiler/dist/index.mjs:47071:35)
    at resolveRuntimePropsFromType (file:///Users/andreas/Projects/marionroehrig-nuxt3/node_modules/.pnpm/@vue-email+compiler@0.8.10_typescript@5.3.3_vue@3.4.15/node_modules/@vue-email/compiler/dist/index.mjs:48396:20)
    at genRuntimePropsFromTypes (file:///Users/andreas/Projects/marionroehrig-nuxt3/node_modules/.pnpm/@vue-email+compiler@0.8.10_typescript@5.3.3_vue@3.4.15/node_modules/@vue-email/compiler/dist/index.mjs:48372:17)
    at genRuntimeProps (file:///Users/andreas/Projects/marionroehrig-nuxt3/node_modules/.pnpm/@vue-email+compiler@0.8.10_typescript@5.3.3_vue@3.4.15/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/nodemailer@6.9.9/node_modules/nodemailer/lib/mime-node/index.js:988:35)  
  at process.processImmediate (node:internal/timers:478:21)

[Flowko]

yes, this is an issue we already know, importing things outside of what we already allow is not gonna work, nuxt works in a different way when the project is built, its one of the draw backs of the SSR solution we made, wil keep this open till we find a solution for that, we currenlty only auto import components that live on the emailsfolder and thats it

more info: https://vuemail.net/ssr/introduction

[juni0r]

@Flowko Thanks for the swift reply!

I was wondering, it works perfectly fine in the same setup using vue-email@0.7.2 and the vue-email/nuxt module in both development and with the build. I have reverted to that for now.

What caused the regression? Did anything change in newer releases of Vue/Nuxt?

[Flowko]

hmm interseting, would you be able to share a reproduction please, i would love to take a look, cus that shouldn't work haha

[juni0r]

Sure thing. Here you go

[juni0r]

@Flowko Did you have a chance to look at the reproduction? This is keeping me from updating my project dependencies. In order to update nuxt / vue I'd have to use a newer version of vue-email and remove all the type imports from my components. So it'd be good to know if you're planning on fixing this any time soon. Thanks!

[Flowko]

@juni0r ah sorry, yes im planning to work on it after i finish my full time project, sorry for the delay 🙏

[Dave136]

@Flowko I was testing on local the reproduction repo, I found some interesting things. It's like @juni0r says, in the v0.7.2, the types importations works, but in the newer versions not.

This "issue" is related to write/read permissions, but is not by the nuxt package, is a compiler issue.

[juni0r]

@Flowko I understand you have other priorities right now, but do you think there's a chance this is going to be fixed any time soon? It becomes increasingly difficult to manage project dependecies to accomodate v0.7.2. We're now left with the only alternative to refactor all email templates to not use type imports which is a bit of a bummer, but would enable us to upgrade. I don't mean to put pressure on this but I need manage expectations here.

Thank you!

[Flowko]

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