Module Parse Failed for HSPinInput.getInstance

[jimmyzzxhlh]

Summary

Preline 2.3.0 throws Module Parsed Failed if I tried to call HSPinInput.getInstance()

Steps to Reproduce

I'm trying to get the pin input object using HSPinInput.getInstance in NextJS, but got the following error for Preline 2.3.0.

Module parse failed: Unexpected token (22:21)
| 
| class HSAccordion
> 	extends HSBasePlugin<IAccordionOptions>
| 	implements IAccordion
| {

I'm not sure if I'm doing it in the right way to get the pin item instance object, because I got a different error in older version of Preline (e.g. 2.0.3 from the demo Stackblitz) which basically returns me a null object. What is the best way to get the pin value in this case?

Demo Link

https://stackblitz.com/edit/preline-v2-nextjs-tvm16z?file=src%2Fapp%2Fcomponents%2FPinInputItem.tsx

Expected Behavior

No response

Actual Behavior

No response

Screenshots

No response

[Jiroscopes]

Make sure your import is like import { HSPinInput } from "preline/preline";

[olegpix]

Summary

Preline 2.3.0 throws Module Parsed Failed if I tried to call HSPinInput.getInstance()

Steps to Reproduce

I'm trying to get the pin input object using HSPinInput.getInstance in NextJS, but got the following error for Preline 2.3.0.

Module parse failed: Unexpected token (22:21)
| 
| class HSAccordion
> 	extends HSBasePlugin<IAccordionOptions>
| 	implements IAccordion
| {

I'm not sure if I'm doing it in the right way to get the pin item instance object, because I got a different error in older version of Preline (e.g. 2.0.3 from the demo Stackblitz) which basically returns me a null object. What is the best way to get the pin value in this case?

Demo Link

https://stackblitz.com/edit/preline-v2-nextjs-tvm16z?file=src%2Fapp%2Fcomponents%2FPinInputItem.tsx

Expected Behavior

No response

Actual Behavior

No response

Screenshots

No response

Hi,
Please follow these steps:

1. PrelineScript.tsx. You need to add the following code (check the full code in demo)

window.dispatchEvent(new CustomEvent('PrelineReady'));

2. PinInputItem.tsx. You need to add the following code (check the full code in demo)

import type { HSPinInput } from 'preline';

declare global {
  interface Window {
    HSPinInput: typeof HSPinInput;
  }
}

...

useEffect(() => {
  const handlePrelineReady = () => {
    if (pinInputRef.current) {
      console.log(window.HSPinInput.getInstance(pinInputRef.current, true));
    }
  };

  window.addEventListener('PrelineReady', handlePrelineReady);

  return () => window.removeEventListener('PrelineReady', handlePrelineReady);
}, []);

In the future we will try to make this process easier.