Unable to work with SSR on Laravel - Inertia.js

[umaraziz0]

Hello, I'm currently using Preline UI on my Laravel - Inertia - Vue.js project. I've encountered an error when trying to enable Inertia's SSR feature:

Starting SSR server on port 13714...
Inertia SSR server started.
file:///media/aziz/Windows-SSD/laragon/www/project/bootstrap/ssr/assets/Index-sGI-EgHe.js:5
import { HSTabs } from "preline";
         ^^^^^^
SyntaxError: Named export 'HSTabs' not found. The requested module 'preline' 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 'preline';
const { HSTabs } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:132:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:214:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)
    at async resolve (file:///media/aziz/Windows-SSD/laragon/www/project/bootstrap/ssr/ssr.js:20:30)
    at async j (file:///media/aziz/Windows-SSD/laragon/www/project/node_modules/@inertiajs/vue3/dist/index.esm.js:1:5861)
    at async file:///media/aziz/Windows-SSD/laragon/www/project/bootstrap/ssr/ssr.js:16:19
    at async Server.<anonymous> (file:///media/aziz/Windows-SSD/laragon/www/project/node_modules/@inertiajs/core/dist/server.esm.js:1:527)

Seems to be caused by me importing the HSTabs component manually, since I need it to open the tabs programatically, as such

// ----- Methods ----- //
const openLoginTab = (): void => {
  if (loginTab.value === null) {
    return;
  }

  HSTabs.open(loginTab.value);
};

const openRegisterTab = (): void => {
  if (registerTab.value === null) {
    return;
  }

  HSTabs.open(registerTab.value);
};

I tried using the supposed global object with window.HSTabs, but it gave me this error: Property 'HSTabs' does not exist on type 'Window & typeof globalThis'.

Similar issues happen to other components as well, such as HSSelect that I had to import manually to set an event listener to.

Any help would be appreciated. Unfortunately if I don't resolve this soon I might have to look for another library.

Additional context:

• Laravel v10.39.0
• Inertia v1.0.14
• Vue v3.3.10
• Vite v5.0.10
• Typescript v5.3.3
• Preline v2.0.3

[spocock]

You can possibly access using the import pattern given in the error message

import pkg from 'preline'; const { HSTabs } = pkg;

[jahaganiev]

Hey @umaraziz0 - you may check out this issue discussion for some workarounds: https://github.com/htmlstreamofficial/preline/issues/224

In addition, we've added Preline JavaScript page with some explanations how Preline's JS works: https://preline.co/docs/preline-javascript.html

Cheers!