Javascript Functionality are not working in components (Next.JS)

[abdulahd2008]

I cannot use interact with components which uses plugins like select, stepper etc

Here's my configurations (I followed official documentation)

---

PrelineScript.tsx

"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(() => {
    import("preline/preline");
  }, []);

  useEffect(() => {
    setTimeout(() => {
      window.HSStaticMethods.autoInit();
    }, 100);
  }, [path]);

  return null;
}

---

tailwind.config.ts

import type { Config } from "tailwindcss";

const config: Config = {
  darkMode: "class",
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/preline/preline.js",
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [require("preline/plugin"), require("@tailwindcss/forms")],
};
export default config;

Any help are appreciated

[VishalLudhrani]

Here's my PrelineLoader.jsx from a (Next.js) project:

"use client";

import HSAccordion from "@preline/accordion";
import { usePathname } from "next/navigation";
import { HSDropdown } from "preline/preline";
import { useEffect } from "react";

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

  useEffect(() => {
    import("preline/preline");
  }, []);

  useEffect(() => {
    setTimeout(() => {
      HSAccordion.autoInit();
      HSDropdown.autoInit();
    }, 100)
  }, [path])

  return <></>
}

It's working for me. I hope it helps solving your problem as well! :)

[abdulahd2008]

Here's my PrelineLoader.jsx from a (Next.js) project:

"use client";

import HSAccordion from "@preline/accordion";
import { usePathname } from "next/navigation";
import { HSDropdown } from "preline/preline";
import { useEffect } from "react";

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

  useEffect(() => {
    import("preline/preline");
  }, []);

  useEffect(() => {
    setTimeout(() => {
      HSAccordion.autoInit();
      HSDropdown.autoInit();
    }, 100)
  }, [path])

  return <></>
}

It's working for me. I hope it helps solving your problem as well! :)

Thank you, but it is not working still the same issue

[shanehoban]

Sometimes this setTimeout is too short and the preline JS isn't imported yet. Obviously we don't want to increase the timeout (in fact, we technically don't want it at all).

There must be a better way to initialize preline without depending on the useEffect & setTimeout...

Sorry I don't have a solution but this error is visible more commonly when generating lighthouse reports on pages that have preline JS instantiated like this.

[shanehoban]

Coming back with a solution here, I put it inside its own issue: https://github.com/htmlstreamofficial/preline/issues/270

'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
}

[jahaganiev]

Hey folks, seems the issue has been addressed by the community. We've also added Preline JavaScript page with some explanation how Preline JavaScript works.

https://preline.co/docs/preline-javascript.html

Cheers!

[azizbekjuraev]

Hey folks, seems the issue has been addressed by the community. We've also added Preline JavaScript page with some explanation how Preline JavaScript works.

https://preline.co/docs/preline-javascript.html

Cheers!

Assalomu aleykum. Oka ishamitida baribir shu. Misol birorta dropdown birmarta ishlagandan kein. Boshqa pagega utib qaytib kelmaguncha ishlamayapti. Shunga nima qilsak boladi?