Cannot read properties of undefined (reading 'autoInit')

[Slddev]

[ollebergkvist]

Also seeing this

[luguanhui]

Also seeing this

[jordankimsey]

I'm facing the same issue.

[VishalLudhrani]

I see many of us are getting confused by HSStaticMethods. It's just a way of saying that you need to import HS (eg.: HSAccordion) and call autoInit on its instance.

Here's the PrelineLoader.jsx from one of my (Next.js) projects:

"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 <></>
}

I hope this helps. :)

[Wigglor]

@VishalLudhrani So do I need to add HSDropdown instance if I want to ad the dropdown components? I'm still not getting them to work.

[MeromTh]

Try setTimeout to 200? or something like this

useEffect(() => {
  if (document.readyState === 'complete') {
    window.HSStaticMethods.autoInit()
  }
}, [path])

[olegpix]

Hi! Please check out the official documentation here Preline - Next.js You should add the following code to prevent TS warnings:

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

[VishalLudhrani]

@VishalLudhrani So do I need to add HSDropdown instance if I want to ad the dropdown components? I'm still not getting them to work.

Yup. That is how it worked for me.

If you weren't able to get those to work, here's an alternative approach:

"use client";

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

const isBrowser = typeof window !== undefined;

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

  useEffect(() => {
    if (isBrowser) {
      // if this component is rendered on a browser, import preline
      import("preline/preline");
    }
  }, [])

  useEffect(() => {
    setTimeout(() => {
      if (isBrowser) {
        // if this component is rendered on a browser, import relevant preline plugins
        import("preline/preline").then(({ HSAccordion, HSDropdown, HSCollapse }) => {
          HSAccordion.autoInit();
          HSDropdown.autoInit();
          HSCollapse.autoInit();
        })
      }
    }, 100)
  }, [path])

  return <></>
}

@Wigglor

[insivika]

I see many of us are getting confused by HSStaticMethods. It's just a way of saying that you need to import HS (eg.: HSAccordion) and call autoInit on its instance.

Here's the PrelineLoader.jsx from one of my (Next.js) projects:

"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 <></>
}

I hope this helps. :)

Hi can you please explain how HSAccordion is related to HSStaticMethods?

[VishalLudhrani]

@insivika HSStaticMethods could be a placeholder (just a way to say your plugin would go here). You would need to replace it with all the plugins you're using in your project.

So, in my case, I replaced it with HSAccordion and HSDropdown since I was using both.

[EDIT]: This was just my assumption, which seemed to work for me.

[Nishitbaria]

I see many of us are getting confused by HSStaticMethods. It's just a way of saying that you need to import HS (eg.: HSAccordion) and call autoInit on its instance. Here's the PrelineLoader.jsx from one of my (Next.js) projects:

"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 <></>
}

I hope this helps. :)

Hi can you please explain how HSAccordion is related to HSStaticMethods?

This Code is work for me ✨

[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!