urban magnet
I added vue integration in my astro project, during development everything is ok. But when I try to built my project, I've following error in my console :
document.createEvent is not a function
Error is focused on this line :
node_modules/@vue/runtime-dom/dist/runtime-dom.cjs.prod.js:279
if (Date.now() > document.createEvent('Event').timeStamp) {
I search on google but I don't found an answer, so I'm here for you help 😉
Thanks.
My package.json config
{
...
"devDependencies": {
"<@&1026769514878205992>/lit": "^1.0.1",
"<@&1026769514878205992>/solid-js": "^1.1.0",
"<@&1026769514878205992>/svelte": "^0.5.1",
"<@&1026769514878205992>/vue": "^0.5.0",
"astro": "^1.0.0-rc.3",
"lit": "^2.3.1",
"sass": "^1.54.9",
"solid-js": "^1.5.6",
"svelte": "^3.49.0",
"vue": "^3.2.40"
},
"dependencies": {
"@nanostores/solid": "^0.3.0",
"@nanostores/vue": "^0.5.5",
"nanostores": "^0.6.0",
"nes.css": "^2.3.0",
},
...
}
floral juniper
It looks like you're maybe missing a client directive for your Vue component: https://docs.astro.build/en/reference/directives-reference/#client-directives
By default, Astro will convert any Framework UI components (Vue, Svelte, etc.) into static HTML unless you include a client directive. If your Vue component needs to access the document object, it can't function correctly as static HTML because there is no document in the server's build environment.
Try using <Your-Vue-Component client:only="vue" />
floral juniper
If your svelte components are interactive, then yes they will need one of the client directives (note that they each have slightly different behaviors)
urban magnet
Ok, thanks.
I'm trying with directive.
I tried to put client directive on all my Vue components inside my index.astro file (client:only="vue").
But I still have same problem.
Is there a way to know which line or file make that error in command line ?
It's weird, just to test I changed my integration order in astro config file, like :
// before
export default defineConfig({
integrations: [vue(), svelte(), lit(), solid()]
});
// after
export default defineConfig({
integrations: [svelte(), lit(), vue(), solid()]
});
And it worked ^^
There is a reason ?
floral juniper
Hmmm...
I have had an issue before where the order of vue() in the integrations did cause an issue -- smells like a bug 🪲
urban magnet
Ok, you think I've to open an issue on astro repository ?
floral juniper
If you can create a minimal reproduction on something like Stackblitz or Gitpod and open an issue, I think that would be a big help! Cause as you see, it's a very random solution that is hard to debug for folks
urban magnet
Ok, I'll do it 😉
Thanks for your help.
floral juniper
Amazing -- let me know when you open the issue as I know of another related issue I'd like to link!
urban magnet
Ok I'll post it here.