On mount, carousel raises an error `Cannot read properties of undefined (reading 'getIndex')` when circular option is set to true.

Description

“@egjs/vue-flicking”: “3.8.0” On mount, carousel raises an error Cannot read properties of undefined (reading 'getIndex') when circular option is set to true.

TypeError: Cannot read properties of undefined (reading 'getIndex')
  at clonePanels(./node_modules/@egjs/flicking/dist/flicking.esm.js:3416:47)
  at updateClonePanels(./node_modules/@egjs/flicking/dist/flicking.esm.js:3202:12)
  at resize(./node_modules/@egjs/flicking/dist/flicking.esm.js:2401:10)
  at build(./node_modules/@egjs/flicking/dist/flicking.esm.js:3223:10)
  at new t(./node_modules/@egjs/flicking/dist/flicking.esm.js:2271:10)
  at new e(./node_modules/@egjs/flicking/dist/flicking.esm.js:4335:22)
  at call(./node_modules/@egjs/vue-flicking/dist/flicking.esm.js:125:29)
  at invokeWithErrorHandling(./node_modules/vue/dist/vue.esm.js:1872:57)
  at callHook(./node_modules/vue/dist/vue.esm.js:4244:7)
  at insert(./node_modules/vue/dist/vue.esm.js:3167:7)
  at invokeInsertHook(./node_modules/vue/dist/vue.esm.js:6401:28)
  at __patch__(./node_modules/vue/dist/vue.esm.js:6620:5)
  at _update(./node_modules/vue/dist/vue.esm.js:3972:19)
  at call(./node_modules/vue/dist/vue.esm.js:4090:10)
  at get(./node_modules/vue/dist/vue.esm.js:4504:25)
  at run(./node_modules/vue/dist/vue.esm.js:4579:22)
  at flushSchedulerQueue(./node_modules/vue/dist/vue.esm.js:4335:13)
  at i(./node_modules/vue/dist/vue.esm.js:1998:12)
  at MutationObserver.te(./node_modules/vue/dist/vue.esm.js:1924:12)

It doesn’t happen all the time, but we noticed this error happening a lot on our error monitor tool.

Steps to check or reproduce

Unfortunately we cannot reproduce it locally. But we know that it is in this line:

var needCloneOnPrev = panelAtLeftBoundary.getIndex() !== 0 && panelAtLeftBoundary.getIndex() <= panelAtRightBoundary.getIndex();

panelAtLeftBoundary and panelAtRightBoundary start as undefined and one of them (or both) is not set in the for loops above this line. Is there a reason why this is happening? Is it possible to add an extra check if panelAtLeftBoundary and panelAtRightBoundary exist in this line so it doesn’t throw?

[WoodNeck]

Probably it can be reproduced if the carousel tries to mount on a div that is with style display: none? Not very sure about that.

Certainly, it could be a possible cause for this issue. As there were a few issues related to panel size being 0 in the v3. #619 fixes where you’ve suggested, I’ll release it after it’s merged. Feel free to report any further issues after that 😃

[kazvaggos]

@WoodNeck Thanks a lot for the fix! However, this fix introduced a much bigger bug with the above scenario described in #624