Cannot run in SSR/Vue 3 due to floating-vue components

[bhaidar]

Hello,

I am using the package inside a Laravel / InertiaJS project.

Inside the vite.config.js file, I exclude the package as I need it only on the client-side.

 ssr: {
        noExternal: [
            // ...
            'floating-vue',
            // ...
        ]
    },

When I run the inertiajs SSR command via php artisan inertia:start-ssr, then I start the app, I get the following error

ReferenceError: Element is not defined
    at file:///var/www/html/bootstrap/ssr/assets/Navigation-4196422e.js:1090:30
    at ModuleJob.run (node:internal/modules/esm/module_job:234:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:473:24)
    at async j (file:///var/www/html/node_modules/@inertiajs/vue3/dist/index.esm.js:1:5861)
    at async Server.<anonymous> (file:///var/www/html/node_modules/@inertiajs/core/dist/server.esm.js:1:527)

At line-1095 inside the Navigation component, is this code:

$t = defineComponent({
  name: "VPopperWrapper",
  components: {
    Popper: nt,
    PopperContent: Q
  },
  mixins: [
    Z,
    J("finalTheme")
  ],
  props: {
    // ... 
    container: {
      type: [String, Object, Element, Boolean], **// Line 1095**
      default: void 0
    },
    boundary: {
      type: [String, Element],
      default: void 0
    },

Any idea how to make this work?

Thanks Bill

[captenmasin]

Having this issue with Inertia SSR too, don't suppose you've found a way around it @bhaidar ?

[bhaidar]

@captenmasin Same here, couldn't find a solution for it.

[aqordeon]

facing the same issue

[aqordeon]

I manage to solve the issue by using https://www.npmjs.com/package/patch-package I remove the Element type, and then it still works well

// node_modules/floating-vue/dist/floating-vue.mjs

container: {
  // type: [String, Object, Element, Boolean],
  type: [String, Object, Boolean],
  default: void 0
},
boundary: {
  // type: [String, Element],
  type: [String],
  default: void 0
},