Cannot read properties of undefined (reading 'autoInit') about preline HOT 11 OPEN

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

from preline.

Try setTimeout to 200? or something like this

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

from preline.

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. :)

from preline.

@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

from preline.

Also seeing this

from preline.

Also seeing this

from preline.

I'm facing the same issue.

from preline.

@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.

from preline.

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?

from preline.

@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.

from preline.

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 ✨

from preline.