vue-email / nuxt Goto Github PK
View Code? Open in Web Editor NEW๐ Official Nuxt module for Vue Email. Build email templates with Vue components.
Home Page: https://vuemail.net/ssr/nuxt
License: MIT License
๐ Official Nuxt module for Vue Email. Build email templates with Vue components.
Home Page: https://vuemail.net/ssr/nuxt
License: MIT License
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)
` 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)
`
// 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 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
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'
},
})
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:
I created this issue on the main package, but I think it's more appropriate here
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 ?
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
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.
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:
npm run build
, then either move the .output folder or delete node_modules.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.
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.
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'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?
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!
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.
It should work as described in vue-email/vue-email#64
https://stackblitz.com/edit/nuxt-starter-a69obu?file=emails%2FCustomLink.vue
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!
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).
The vue-email
package should not be included in the client bundle and operate only server side.
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.
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)])```
// 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)
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?
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 moduleWe 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 ๐ฅฐ
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
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
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 };
});
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
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' } },
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.
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
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.
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
Nuxt DevTools only show white page and error Uncaught ReferenceError: __NUXT_ASYNC_CONTEXT__ is not defined
is shown in browser console
Nuxt DevTools work without error
https://stackblitz.com/edit/nuxt-starter-wvxxjo?file=nuxt.config.ts
"nuxt": "^3.9.3",
"@vue-email/nuxt": "^0.8.10"
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
<EImg
src="/images/logo.png"
width="100"
height="33"
alt="logo"
:style="logo"
/>
// Email
vueEmail: {
baseUrl: 'https://example.com'
}
{
"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, 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)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.