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?