[Bug]: CustomEvent is not defined on SSR

[zernonia]

          We’re getting a fatal error on latest Nuxt and 1.8.0

500

CustomEvent is not defined

at ee.immediate (./node_modules/.pnpm/[email protected][email protected][email protected]_/node_modules/radix-vue/dist/index.js:1506:163)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

In console:

Loading Failed for the module with source “http://localhost:3000/_nuxt/node_modules/.cache/vite/client/deps/perfect-debounce.js?v=768501e7”.

and

Uncaught (in promise) TypeError: error loading dynamically imported module: http://localhost:3000/_nuxt/@fs/Users/[PERSONAL_FOLDER]/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]_@[email protected]_gpokhtbjebjqlsaipxd7yrpxba/node_modules/@nuxt/devtools/dist/runtime/plugins/view/client.mjs?v=57a21bdb

Originally posted by @luigigorlero in #901 (comment)

[roberthgnz]

Same problem :/

[luigigorlero]

Seems to be happening using PNPM and Node18, no issue using Yarn and Node20

[zernonia]

Yup might be Node18 doesn't support CustomEvent nodejs/node#40678.
@luigigorlero @roberthgnz can you try bump the Node version and see if it works? 😁

[roberthgnz]

I am using the library with Nuxt, I have solved it by loading the route in SPA mode, in that case I don't need it to be SSR.

[luigigorlero]

Yup might be Node18 doesn't support CustomEvent nodejs/node#40678. @luigigorlero @roberthgnz can you try bump the Node version and see if it works? 😁

Can confirm same setup Nodev18 throws a fatal, Nodev20 works flawlessly!

[BayBreezy]

So what now? What about the apps running on node18?

[sadeghbarati]

I'm curious why not Vue emits? why we recreate the emits again?
at least for events on components we can use Vue emits but for document or window scope we need CustomEvent

Perhaps using isClient before using CustomEvents might help solving this issue

[DamianGlowala]

Could someone prepare a minimal reproduction which fails on Node 18?

[sadeghbarati]

https://stackblitz.com/edit/github-uewhkz

node v18 and pnpm working right ✅

[zernonia]

I'm curious why not Vue emits? why we recreate the emits again?
at least for events on components we can use Vue emits but for document or window scope we need CustomEvent

@sadeghbarati I think using Custom Event here make sense, as we can target the specifc node with the event, and user can listen to that event by using v-on from Vue. v-on:enter or @enter.

Yeah we should add isClient in this function as it make sense to have this animation custom event to be triggered only in client-side.

[luigigorlero]

https://stackblitz.com/edit/github-uewhkz

node v18 and pnpm working right ✅

The problem might be localized to certain components; I forked your repo and used a Toast instead and was able to reproduce the error
https://stackblitz.com/edit/github-uewhkz-cd6pvt