naver / egjs-flicking

🎠 ♻️ Everyday 30 million people experience. It's reliable, flexible and extendable carousel.

Home Page:https://naver.github.io/egjs-flicking/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Unable to even use the plugin in Next.js client mode

pexch opened this issue · comments

Description

Not able to load the plugin into TSX, throws tons of errors.

If I try to import FrameGrid from @egjs/react-grid I get the following error:
TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

If I import Flicking from @egjs/react-flicking I get this error:
JSX element class does not support attributes because it does not have a 'props' property.ts(2607)

Steps to check or reproduce

import Flicking from "@egjs/react-flicking";
import { FrameGrid } from "@egjs/react-grid";

export default function Test() {
    return (
                <Flicking circular={true}>
                    <div className="grid-panel">1</div>
                    <FrameGrid className="grid-panel">
                        <div className="has-background-warning has-text-dark">2</div>
                        <div className="has-background-danger has-text-white">3</div>
                        <div className="has-background-info has-text-white">4</div>
                        <div className="has-background-success has-text-white">5</div>
                        <div className="has-background-grey has-text-white">6</div>
                    </FrameGrid>
                    <div className="grid-panel">7</div>
                    <FrameGrid className="grid-panel">
                        <div className="has-background-light has-text-dark ">8</div>
                        <div className="has-background-grey has-text-white">9</div>
                        <div className="has-background-info has-text-white">10</div>
                        <div className="has-background-success has-text-white">11</div>
                        <div className="has-background-warning has-text-dark">12</div>
                        <div className="has-background-danger has-text-white">13</div>
                    </FrameGrid>
                    </Flicking>
       )
})