Vue 3 + Vite build/preview error TypeError: Cannot set properties of undefined (setting '_flicking')

[Azcimas]

Description

Hello and thank you for creating great package!

I am not using Typescript. I am using Vue 3 + Vite + Vue3-flicking + flicking-plugins:

"@egjs/flicking-plugins": "^4.7.0",
"@egjs/vue3-flicking": "^4.10.8",
"vue": "^3.3.2",
"vite": "^4.3.5"

Everything is working fine while runing regular development mode. After running production build(vite build) or preview(vite preview) I am getting this error inside console: TypeError: Cannot set properties of undefined (setting '_flicking')

I would appreciate any ideas/help.

Steps to check or reproduce

This is how I use FlickingSlider:

<FlickingSlider
      :options="{ align: 'prev', circular: true }"
      :plugins="[new Arrow()]"
      class="lg:w-1/3 cursor-pointer"
>
    <div class="panel w-full object-center">
      <img src='../../assets/rav_4_1.jpg' alt="Toyota RAV4" />
    </div>
    <div class="panel w-full object-center">
      <img src='../../assets/rav_4_2.jpg' alt="Toyota RAV4" />
    </div>
    <div class="panel w-full object-center">
      <img src='../../assets/rav_4_3.jpg' alt="Toyota RAV4" />
    </div>
    <template #viewport>
      <span class="flicking-arrow-prev"></span>
      <span class="flicking-arrow-next"></span>
    </template>
</FlickingSlider>

[daybrush]

@Azcimas Would you like to try using plugins like this?

<script>
const plugins = [new Arrow()];

</script>

<template>
  <Flicking :options="{ align: 'prev', circular: true }" :plugins="plugins" class="lg:w-1/3 cursor-pointer">
</template>

[Azcimas]

@daybrush

Moving Arrow instance creation to script setup does not help ;/ I tried with Flicking instead of Slider but it stays the same. Also removed all images/children elements and error is there.

<script setup>
import { Arrow } from '@egjs/flicking-plugins';

const plugins = [new Arrow()];
</script>

<template>
  <FlickingSlider
    :options="{ align: 'prev', circular: true }"
    :plugins="plugins"
    class="lg:w-1/3 cursor-pointer"
  >
    <div class="panel w-full object-center">
      <img src='../../assets/rav_4_1.jpg' alt="Toyota RAV4" />
    </div>
    <div class="panel w-full object-center">
      <img src='../../assets/rav_4_2.jpg' alt="Toyota RAV4" />
    </div>
    <div class="panel w-full object-center">
      <img src='../../assets/rav_4_3.jpg' alt="Toyota RAV4" />
    </div>
    <template #viewport>
      <span class="flicking-arrow-prev"></span>
      <span class="flicking-arrow-next"></span>
    </template>
  </FlickingSlider>
</template>  

[daybrush]

@Azcimas

This is the code I tested. Anything different from your code?

<script setup lang="ts">
import Flicking from "@egjs/vue3-flicking";
import "@egjs/vue3-flicking/dist/flicking.css";
import "@egjs/flicking-plugins/dist/flicking-plugins.css";
import { Arrow } from "@egjs/flicking-plugins";

const plugins = [new Arrow()];
</script>

<template>
  <Flicking :options="{ align: 'prev', circular: true }" :plugins="plugins" class="lg:w-1/3 cursor-pointer">
    <div class="panel w-full object-center">
      <!-- <img src='../../assets/rav_4_1.jpg' alt="Toyota RAV4" /> -->
    </div>
    <div class="panel w-full object-center">
      <!-- <img src='../../assets/rav_4_2.jpg' alt="Toyota RAV4" /> -->
    </div>
    <div class="panel w-full object-center">
      <!-- <img src='../../assets/rav_4_3.jpg' alt="Toyota RAV4" /> -->
    </div>
    <template #viewport>
      <span class="flicking-arrow-prev"></span>
      <span class="flicking-arrow-next"></span>
    </template>
  </Flicking>
</template>

<style scoped>
.panel {
  width: 300px;
  height: 200px;
  background: #f55;
}
</style>

[Azcimas]

@daybrush The only difference I can see it that my setup is not using TS + I am using FlickingSlider component instead of Flicking but changing it does not help.