Next JS / Preline doesn't load, need to change page to get JS loaded

[AntoninMarchardDev]

Hi,

I integrated Preline to my next js application, using the guide referenced on the preline website. Unfortunately, when I pass through my login workflow, some JS doesn't work : Accordion, Dropdown. I have to click on a new page from my sidebar to get the js working. The flow is the following : login -> get redirected using the router.push method (already tried the redirect method, same issue). Then on my sidebar (with some dropdown and accordion), nothing works.

My folder structure is the following (app router)

• (auth) the authentification layout
• (root) application layout

Each layout get the PrelineScript loaded in the HTML :

"use client";

import { usePathname } from "next/navigation";
import { useEffect } from "react";

import { IStaticMethods } from "preline/preline";
declare global {
  interface Window {
    HSStaticMethods: IStaticMethods;
  }
}

export default function PrelineScript() {
  const path = usePathname();

  useEffect(() => {
    const loadPreline = async () => {
      await import("preline/preline");

      window.HSStaticMethods.autoInit();
    };

    loadPreline();
  }, [path]);

  return null;
}

I've got this error randomly on development, but on production, every time. I've got no error on the console, neither on the runtime, neither in the build.

[hanafiprasyah]

Hope this would be the answer for your problems. Check this out : https://stackoverflow.com/questions/78211337/troubleshooting-preline-ui-javascript-functions-in-a-react-inertia-environment

[AntoninMarchardDev]

@hanafiprasyah thank you very much for the help, I succeeded ! I've got some issue with "cannot find self" but some issues are already mentioning this, so I figured it out :) thanks !