SSR Issue with Jetstream Vue

[borovez]

package.json "@headlessui-float/vue": "^0.9.1", "@headlessui/vue": "^1.7.2", "@inertiajs/inertia": "^0.11.0", "vite": "^3.0.0",

Composer.json "laravel/framework": "^9.19", "laravel/jetstream": "^2.11",

Installed Jetstream with SSR https://jetstream.laravel.com/2.x/installation.html#:~:text=php%20artisan%20jetstream%3Ainstall%20inertia%20%2D%2Dssr

Describe the bug When visiting a page that uses any component with Float, I get the following error in the Inertia SSR Server log:

import { Float } from "@headlessui-float/vue";
         ^^^^^
SyntaxError: Named export 'Float' not found. The requested module '@headlessui-float/vue' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@headlessui-float/vue';
const { Float } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:181:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
    at async Server.<anonymous> (file:///var/www/{projectname}/bootstrap/ssr/ssr.mjs:78:37)

To Reproduce

1. npm run build (vite build && vite build --ssr)
2. Start Inertia SSR server node bootstrap/ssr/ssr.mjs
3. Visit page with any component that imports Float
4. Look at the terminal output running the ssr server
5. Check page source to see that the page content html was not generated

Expected behavior There shouldn't be any error pertaining to the import of Float when the Inertia SSR node server is running.

[ninjaparade]

@borovez I would add this to your vite config to make it work. @robertboes helped me crack this as well.

  ssr: {
        noExternal: ['@inertiajs/server', '@headlessui-float/vue'],
    },

[ycs77]

Fixed in v0.9.2