Troubleshooting Preline UI JavaScript functions in a React/Inertia environment

Question

I've spent approximately six hours attempting to resolve this issue without success:

I use Laravel, Vite, React, and Inertia as my primary technologies. My goal is to implement a Preline sidebar that includes accordion NavLinks. However, since HeadlessUI transitions generate this sidebar, none of the Preline functions are operational. I could create a component that renders upon page load, allowing all functions to execute correctly. However, I anticipate encountering similar issues with other components, or I suspect this might occur during page navigation. I would greatly appreciate any help in resolving this issue.

As you may know, this is an Inertia configuration:

import "./bootstrap";
import "../css/app.css";

import { createRoot } from "react-dom/client";
import { createInertiaApp } from "@inertiajs/react";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";

const appName = import.meta.env.VITE_APP_NAME || "Laravel";

createInertiaApp({
    title: (title) => `${appName} | ${title}`,
    resolve: (name) =>
        resolvePageComponent(
            `./Pages/${name}.jsx`,
            import.meta.glob("./Pages/**/*.jsx")
        ),
    setup({ el, App, props }) {
        const root = createRoot(el);

        root.render(<App {...props} />);

        delete el.dataset.page;
    },
    progress: {
         color: "#fbbf24",
    },
});

And this is why I can't use Preline Guide

Answer 1

After 24 hours of trying different thing, finally found a solution. I write it here so that it helps someone. Add multiple lines to your code and make your app.jsx file (which has your Inertia config in it) like this and it's done:

import "./bootstrap";
import "../css/app.css";

import { createRoot } from "react-dom/client";
import { createInertiaApp } from "@inertiajs/react";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
import { HSStaticMethods } from "preline";

HSStaticMethods.autoInit();

const observer = new MutationObserver((mutationsList) => {
    for (const mutation of mutationsList) {
        HSStaticMethods.autoInit();
    }
});

observer.observe(document.body, {
    attributes: true,
    subtree: true,
    childList: true,
    characterData: true,
});

const appName = import.meta.env.VITE_APP_NAME || "Laravel";

createInertiaApp({
    title: (title) => `${appName} | ${title}`,
    resolve: (name) =>
        resolvePageComponent(
            `./Pages/${name}.jsx`,
            import.meta.glob("./Pages/**/*.jsx")
        ),
    setup({ el, App, props }) {
        const root = createRoot(el);

        root.render(<App {...props} />);

        delete el.dataset.page;
    },
    progress: {
        color: "#fbbf24",
    },
});

Special thanks to "biskoot" who answered same question about HSDropdown here and I could solve it for all tools in PrelineUI.