Estoy tratando de usar la biblioteca 'hover-effect' en mi próxima aplicación js. Sin embargo, recibo estos errores:

Error del servidor => SyntaxError: no se puede usar la declaración de importación fuera de un módulo (/node_modules/gsap/TweenMax.js (14))

Código:

 import { Container, Header } from '../components'; // @ts-ignore import hoverEffect from 'hover-effect'; import { useEffect } from 'react'; const Home = () => { useEffect(() => { new hoverEffect({ parent: document.querySelector('.landing-page-slider'), intensity: 0.3, image1: 'images/slider-img1.jpg', image2: 'images/slider-img2.jpg', displacementImage: 'images/displacement/1.jpg', }); }, []); return ( <Container> <Header /> <div className="landing-page-slider"></div> </Container> ); }; export default Home;

Cosas que probé:

 const hoverEffect: any = dynamic(() => import('hover-effect'), { ssr: false });

entonces el error se convierte en: TypeError: hoverEffect no es un constructor

Agregué "tipo": "módulo" en el archivo package.json y luego el error se convierte en:

No se pudo cargar next.config.js. ReferenceError: el módulo no está definido en el alcance del módulo ES. Este archivo se trata como un módulo ES porque tiene una extensión de archivo '.js'. Para tratarlo como un script CommonJS, cámbiele el nombre para usar la extensión de archivo '.cjs'.

Y ahora no puedo iniciar el servidor hasta que eliminé "type":"module" en package.json. ¿Hay alguna forma de usar esta biblioteca en la próxima aplicación js?