Big Integer Error / Build template Rendering Error

[batihandev]

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/esbuild@0.20.1/node_modules/esbuild/lib/main.js:1651:15) at node_modules/.pnpm/esbuild@0.20.1/node_modules/esbuild/lib/main.js:849:29 at responseCallbacks. (node_modules/.pnpm/esbuild@0.20.1/node_modules/esbuild/lib/main.js:704:9) at handleIncomingPacket (node_modules/.pnpm/esbuild@0.20.1/node_modules/esbuild/lib/main.js:764:9) at Socket.readFromStdout (node_modules/.pnpm/esbuild@0.20.1/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

[Flowko]

did u try to remove node_modules and lock file and run pnpm install --force ?

[Flowko]

tested it inside of github workspaces, all is good, didnt get that error:

runniing with preview:

Note: i updated this to return correct html content:

[batihandev]

Hello i just tried same deleted node_modules and pnpm lock and used pnpm install --force samething is still happening.

I am using wsl can that be the cause ? Not sure i forgot to remove defineLazyEventHandler was testing other stuff probalby not relevant.

[Flowko]

that im not sure of tbh, if it worked inside of a container, then its not anything related to the code you have, but more related to some libraries that might be breaking this

[batihandev]

This issue happening for my co-workers too. Not just happening for my computer too. Weird what do you recommend ? Thanks for fast replies.

[Flowko]

does it work fine outside of wsl ?

[Flowko]

ill have to setup wsl and test locally on my machine, dont really have free time to do that, but will keep this issue open till i figure out how to fix it, other than that, you should try to find other solutions if they can work for you

[batihandev]

Okay i just tried with my laptop which is linux without wsl same thing happened. I guess ill try vue-email directly. Thank you.

[Flowko]

really weird, cuz github codespace uses linux and that worked fine for me

[Flowko]

what node/pnpm version you have installed ?

[batihandev]

node 20.11.4 npm 10.2.4 pnpm 8.15.4 what node do you use ?

[batihandev]

just tried with stackblitz issue happened there too https://stackblitz.com/~/github.com/batihandev/ven-reproduction

[Flowko]

yeah same happened to me now, i tweaked some things:

• added missing event

• removed defineprops as its not needed

but what fixed it is setting autoImport to false in nuxt config for vueEmail, just set that to false for now, ill look into why thats happening, but since you will only be using the emails on the server, its okay to have it false

[batihandev]

I did kinda try this and did try again, this just gets rid of the big int error but when fetching for tempate it gives the other error. Which is ;

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

I changed test.get to be same from your package.

Big error goes away when autoimport set to false but other issue remains.

[L422Y]

I was experiencing this after updating, only occured when running my Nuxt app after build, not in dev.

useStorage.getItem appears to be returning a Uint8Array, but the returned value is being treated as if it should be a string:

const source = await useStorage(storageKey).getItem(filename)

If I modify useCompiler to check and decode if necessary, it works on both dev and in my built nuxt app:

async function useCompiler(filename, data, verbose = false) {
    const vueEmailOptions = useRuntimeConfig().public.vueEmail

    let source = (await useStorage(storageKey).getItem(filename))
    const keys = await useStorage(storageKey).getKeys()

    if (source instanceof Uint8Array) source = new TextDecoder().decode(source)

    const components = []
    for (const key of keys) {
        let value = await useStorage(storageKey).getItem(key)
        if (value instanceof Uint8Array) value = new TextDecoder().decode(value)
        if (value && key.endsWith(".vue")) {
            components.push({
                name: key,
                source: value
            })
        }
    }
    if (!source)
        throw new Error(`Template ${filename} not found`)
    const template = await templateRender(
        filename,
        {source, components},
        data,
        {
            verbose,
            options: {
                baseUrl: vueEmailOptions?.baseUrl,
                i18n: vueEmailOptions?.i18n,
                tailwind: vueEmailOptions?.tailwind
            }
        }
    )
    return template
}

Pull request #34 should address this :)

If anyone needs this fix now, you can modify your dependency in package.json:

    "@vue-email/nuxt": "L422Y/nuxt-1#patch-1",

[Flowko]

@batihandev can you please try "@vue-email/nuxt": "npm:@vue-email/nuxt-edge@0.8.18-28488699.acf7373" and see if it still breaks for you, tho the issue seems to still presist on stackblitz but not sure if its an issue on their side or not

[L422Y]

Stackblitz has been having other issues in the last week or so, that's a separate, unrelated error :)

I forked https://github.com/batihandev/ven-reproduction to https://github.com/l422y/ven-reproduction and added display of the result, and it's working post-build:

[batihandev]

Yea thank you. It works. Waiting for release.

[Flowko]

thanks, doing it now, thanks again @L422Y !

[Flowko]

available at v0.8.19