I would like to use the library https://swiperjs.com/ in my Next.js project, but after installing and importing as the “Get started” tutorial instructed, I got the document not defined
error.
Then I did some research and it says I need to use dynamic import.
So I tried
import dynamic from "next/dynamic";
import { CSSSelector, SwiperOptions } from 'swiper/types';
type SwiperProps = {
container: CSSSelector | HTMLElement,
options?: SwiperOptions
}
const Swiper = dynamic<SwiperProps>(() => import('swiper').then((module) => module.Swiper));
Then I got another error
Argument of type '() => Promise<ComponentClass<SwiperProps, any> | FunctionComponent<SwiperProps> | ComponentModule<SwiperProps> | typeof Swiper>' is not assignable to parameter of type 'DynamicOptions<SwiperProps> | Loader<SwiperProps>'.
I created the SwiperProps
type because it is said that I need to use the props of the Swiper
module, I don’t know where to find the props so I found the following definition:
Is the parameters in the constructor
the props?
Please help. Thanks!