Newbie JS issue

[SlimerDude]

Hi, I'm getting a JS error when initialising the plain vanilla version of Flicking (v3.6.1):

I have the same error on Firefox and Chrome (v86)

var flicking = new eg.Flicking('.carousel', { });

Uncaught TypeError: Object prototype may only be an Object or null: undefined
    at setPrototypeOf (<anonymous>)
    at __extends (flicking-3.6.1.js:44)
    at flicking-3.6.1.js:4066
    at flicking-3.6.1.js:4994
    at flicking-3.6.1.js:12
    at flicking-3.6.1.js:13

I do have a some other (non-typescript) JS running on the page but I wouldn't have thought they'd conflict. (Even when I run Flcking first, I get the same error).

I assume the problem is environmental (on my side), but I'm not too sure where to look. Any suggestions?

[WoodNeck]

Hello @SlimerDude ! I guess you're using a flicking.js not flicking.pkgd.js file, right? Flicking has a dependency of @egjs/component @egjs/axes, which come with pkgd but not in flicking.js Please use flicking.pkgd.js instead :) https://naver.github.io/egjs-flicking/release/latest/dist/flicking.pkgd.js

[SlimerDude]

Hi @WoodNeck , thanks for the ultra quick response!

I though perhaps .pkgd was either some JS framework or a new NPM-esque packaging standard, so I stayed away from it!

The new pkgd file gets further, but unfortunately throws this error instead:

flicking.pkgd-3.6.2.js:8694
Uncaught TypeError: Cannot read property 'getIndex' of undefined
    at Viewport.__proto.clonePanels (flicking.pkgd-3.6.2.js:8694)
    at Viewport.__proto.updateClonePanels (flicking.pkgd-3.6.2.js:8473)
    at Viewport.__proto.resize (flicking.pkgd-3.6.2.js:7684)
    at Viewport.__proto.build (flicking.pkgd-3.6.2.js:8493)
    at new Viewport (flicking.pkgd-3.6.2.js:7554)
    at new Flicking (flicking.pkgd-3.6.2.js:9525)
    at edit:43

line 8694:
needCloneOnPrev = panelAtLeftBoundary.getIndex() !== 0 && panelAtLeftBoundary.getIndex() <= panelAtRightBoundary.getIndex(); // Visible count of panel 0 on first screen

I'll just go check I'm not doing something stoopid...

[WoodNeck]

Don't worry I can help :) Can I get any test page that reproduces this issue? Or can you give what options / HTML structure you're using? You can use codepen for this

• https://codepen.io/woodneck/pen/zYBbZNj

Use the above link if you need to.

[SlimerDude]

what options / HTML structure you're using?

Ah, thanks for the tip - removing the circular:true option clears the error and loads the script!

Many thanks for your time and help!

[WoodNeck]

That doesn't look like a proper solution to me if you're willing to use a ciruclar option. Please reopen this issue if you're willing to :)

[SlimerDude]

Thanks, but no need - after some digging I've got it sorted!

My carousel was in a dialogue, so wasn't actually visible when Flicking was initialised on page load. After realising that, Flicking now works great!

Thanks once again!

[SlimerDude]

To give this ticket a proper conclusion, I've implemented egjs.flicking in a dialogue where you can select your avatar / character.

It was easy enough to add the prev / next buttons, and I lifted the code for the pagination icons from your example plugin code.

The website is an eLearning platform the Building Automation and Analytics industry: https://mars.fantomfactory.com/ (I mention it, because sometimes it's nice to know where your code is being used!)