document.createEvent is not a function when build when vue is first in integrations list

[amiceli]

What version of astro are you using?

^1.0.0-rc.3

Are you using an SSR adapter? If so, which one?

none

What package manager are you using?

npm

What operating system are you using?

MacOS

Describe the Bug

I built a project with astro using vue, svelte, solid and lit framework integrations.

When I build project I've following error :

/Users/antoinemiceli/Projects/Github/poke-astro/node_modules/@vue/runtime-dom/dist/runtime-dom.cjs.prod.js:296
        if (Date.now() > document.createEvent('Event').timeStamp) {
                                  ^

TypeError: document.createEvent is not a function

I contact Astro support on discord and someone (noktasizi) explained me to put client directive on my components client:only="vue".

But it didn't work, and just for test, I try to change integrations order in my astro config file.

Before :

import { defineConfig } from 'astro/config';
import vue from "@astrojs/vue";
import svelte from "@astrojs/svelte";
import lit from "@astrojs/lit";

import solid from "@astrojs/solid-js";

// https://astro.build/config
export default defineConfig({
  integrations: [vue(), svelte(), lit(), solid()]
});

And now :

import { defineConfig } from 'astro/config';
import vue from "@astrojs/vue";
import svelte from "@astrojs/svelte";
import lit from "@astrojs/lit";

import solid from "@astrojs/solid-js";

// https://astro.build/config
export default defineConfig({
  integrations: [svelte(), lit(), vue(), solid()]
});

Just moving vue to third position solved my problem.

But it's weird so I open an issue for this.

I try to make a minimal reproducible example on Stackblitz but I failed.
But you can find all my code on my github project poke-astro.

Link to Minimal Reproducible Example

https://github.com/amiceli/poke-astro

Participation

• I am willing to submit a pull request for this issue.

[matthewp]

Thanks, the reason is that Lit creates a DOM shim that adds the document property to the global. Vue is using the existence of this property to run browser code, which is failing because the shim is only partial.

Reorder fixes your problem but isn't guaranteed to fix all such properties. Some libraries might not be able to run alongside the Lit integration.

I submitted a PR to document this limitation. #4999

[amiceli]

Thanks for your answer.

Just for information, if in another project I use only Svelte and Vue.
Does this bug will happen ? Or it's just due to lit ?

[matthewp]

Due to lit