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.