Strange behaviour between dev and buid mode

I have a strange behavior inside a vue application (I’m using the latest vue version 3.2.37)

in development mode everything works fine, the error only occurs in build.

It is a small game, the individual game pages such as main, intro, game, outro, etc. are implemented in individual components. The components are controlled via the page number.

<transition name="fadepage" mode="out-in">
    <div v-if="getPage==3">
        <VueGameIntro  :content="content" :level="level" :page="getPage" ... ></VueGameIntro> 
    </div> 
  </transition>

the game goes over several levels, so that e.g. the intro component is displayed with different intro animations.

 this.lottieAnim.push( lottieWeb.loadAnimation({
          container: document.getElementById('lottie-intro'),
          renderer: 'svg',
          loop: true,
          autoplay: true,
          path: './static/chars/char_' + this.level + '.json'
        }) )

while in dev mode the correct animation always comes, the build version always shows the animation of the first level. The other animations are then shown below.

as soon as the intro component is mounted, different lottie animations are loaded into an array and then set in the html via class.

however, the first animation is still included in the html dom during the build.

why is this happening. I’m actually assuming that the component no longer exists and has been deleted. (as it also happens in dev mode).

I tried to unload the lottie files from the array with:

unmounted() {
      for (let i = 0; i < this.lottieAnim.length; i++) {
        this.lottieAnim[i].removeEventListener('DOMLoaded');
        this.lottieAnim[i].stop();
        this.lottieAnim[i].destroy();
      }
},

no change, why the component is not deleted completely?

does anyone have an idea of what it could be that everything works as intended in serve mode and the lottie files accumulate massively in build mode

Hi @mindthegap
First, you need to check out the router’s history mode requires some settings on your webserver: Different History modes | Vue Router

hmmm, theres no router plugin involved.

At first I thought it was due to a missing key for the individual components, but even if I increase a key by one every time I change pages, this behavior persists.

everything fine in dev, error in build mode.