I'm trying to use 'hover-effect' library in my next js application. However, I'm getting these error:

Server Error => SyntaxError: Cannot use import statement outside a module (/node_modules/gsap/TweenMax.js (14))

Code:

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;

Things I tried:

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

then error becomes: TypeError: hoverEffect is not a constructor

I added "type":"module" in package.json file then error becomes:

Failed to load next.config.js. ReferenceError: module is not defined in ES module scope This file is being treated as an ES module because it has a '.js' file extension.To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

And now I cannot start server until I removed "type":"module" in package.json. Is there any way to use this library in next js app?