"document is not defined" when using bootstrap js

[axelthat]

So I have this component which uses collapse.js of bootstrap,

<script lang="ts" setup>
import { onMounted } from "@vue/runtime-core"
import Collapse from "bootstrap/js/dist/collapse"

onMounted(() => {
  new Collapse(document.body)
})
</script>

<template>
  <div>
    <slot></slot>
  </div>
</template>

I get this error: ReferenceError: document is not defined. On nuxt, you could do,

onMounted(() => {
  if(process.client) {
    new Collapse(document.body)
  }
})

How do I do the same?

[axelthat]

Okay this is weird. I console logged document and I got no error. I get error only when using the bootstrap js library.

[brillout]

Your issue is not related to the plugin.

[brillout]

But to answer your question: if (typeof window !== "undefined") window.document.body.

[axelthat]

@brillout But it doesn't happen without SSR. I tried it on regular vite project and everything works fine. Even doing if (typeof window !== "undefined") doesn't work.

[brillout]

It's an SSR problem, but not a vite-plugin-ssr problem.

Dig on bootstrap's side.

[axelthat]

Okay thanks

[axelthat]

For anyone that stumbles upon this issue:
twbs/bootstrap#33722
twbs/bootstrap#34265
twbs/bootstrap#33131

[brillout]

Thanks for sharing. What solution did you end up choosing?

[axelthat]

This one: twbs/bootstrap#33722

[brillout]

From Discord:

By the way, i found that directly include bootstrap cdn in the documentHtml solved the issue also, just another workaround for quick and dirty solve.
[Source]

Reply:

It's a legit fix if you ask me. IIRC Bootstrap recommends loading bootstrap from their CDN; they will maintain the CDN links for the forseeable future.
[Source]

[axelthat]

Yeah but that will include the whole bootstrap js file. I only needed some components. So did the lazy loading js way.

[brillout]

Makes sense.