NextJS Integration Solution - Avoiding setTimeout at all costs

[shanehoban]

The issue is that sometimes the setTimeout function is called before the preline script has been imported - so the window.HSStaticMethods call is not defined. This is reproducible when running lighthouse reports (although still doesn't occur every time).

Proposed solution for the code on in your docs is below, utilizing an async wrapper function to ensure the preline script is imported before the window.HSStaticMethods.autoInit() is called.

Solution below:

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

[Wigglor]

@shanehoban Should I then just call the PrelineScript function from the App component? Anything I should think of if I'm using a regular react app?

[shanehoban]

@Wigglor The solution above is specifically for NextJS based apps.

If you are simply using react (not with NextJS) -> You should be able to follow the React docs here:

https://preline.co/docs/frameworks-react.html

and from the looks of it - you shouldn't have this issue if doing so.

[Wigglor]

@shanehoban Hmm, weird. Been following the docs you referred. Still got the same issue 😢

[Wigglor]

It says that i need to install with NPM, but I'm using yarn. But I guess that could hardly be a reason.

[shanehoban]

@Wigglor it would be better for you to create a new issue if you have a problem instead of using this one as this one is specific to NextJS. I'm not a maintainer of Preline either, just trying to help out.

[insivika]

@shanehoban thank you for the script however when using this im seeing the following issue in nextjs

SyntaxError: Expected ',' or '}' after property value in JSON at position 70 (line 1 column 71)

[shanehoban]

@insivika I suspect this is not related to this library, and the solution I provided is only 26 lines long.

I'd suggest try commenting out all the preline stuff and see if that error is still present.

It seems to be an error relating to parsing JSON somewhere in your project - check all areas you are performing JSON parsing etc.

[insivika]

@shanehoban thank you for your input. You are correct, I had added something to the select component that seemed to introduce this issue.

[insivika]

@shanehoban thanks for the Integration suggestion above. Unfortunately it does not seen to be working for me. I had to reintroduce the setTimeout and set it to 1000 milsec (yikes) to get the event listeners to attach.

[shanehoban]

@insivika If you have your useEffect set up like below, it shouldn't be the case:

useEffect(() => {
    const loadPreline = async () => {
      await import('preline/preline')
      window.HSStaticMethods.autoInit()
    }
    loadPreline()
}, [path])

You see it's an inline async function that gets called whenever the path changes. The import is thus lazy and will only call the next line after it's done. Maybe show what your code looks like?

[jahaganiev]

Hey @shanehoban - thanks for the suggestions and sharing the workaround! We've updated our docs based on your suggestion.

We've also added Preline JavaScript page with some samples and explanation how Preline JavaScript works: https://preline.co/docs/preline-javascript.html

Cheers!