Why generated build in production makes browser crash

Question

I just want to update Vue X store when I click on add button called "Ajouter" but my browser crashes and I should open it again and again.

I already use store in my project and I'm not able to reproduce this issue with another state

I got this issue in production and not in development

I'm using this dependencies :

• "core-js": "^3.8.3",
• "vue": "^3.2.13",
• "vue-class-component": "^8.0.0-0",
• "vue-router": "^4.0.3",
• "vuex": "^4.0.0"

State

export default {
  selectedFoods: [],
  currentFood: {},
  nutrients: {
    energy: 0,
    protein: 0,
    lipid: 0,
    carbohydrate: 0
  },
  activeFilters: {
    energy: false,
    protein: false,
    lipid: false,
    carbohydrate: false
  }
}

I would like to update selectedFoods

Mutation

SET_FOOD_QUANTITY (state: OrganizeMealState, param: SelectedFood) {
    const selectedFoodsLength = Object.values(state.selectedFoods).length
    if (selectedFoodsLength > 0) {
      for (let index = 0; index < selectedFoodsLength; index++) {
        const food = state.selectedFoods[index]
        if (food.food.name === param.food.name) {
          state.selectedFoods[index].quantity = param.quantity
          return
        }
      }
    }

    // ===> crash here
    state.selectedFoods.push({
      food: param.food,
      quantity: param.quantity
    })
  }

I can't push data into selectedFoods because browser crash

Action

setFoodQuantity ({ commit }: { commit: Commit }, param: SelectedFood) {
  commit('SET_FOOD_QUANTITY', param)
},

Component

<template>
  <div class="modal fade" id="modal-quantity" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="modal-portion-label" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modal-quantity-label">Quantité (g)</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" @click="cleanCurrentFood()"></button>
        </div>
        <div class="modal-body">
            <form>
                <div class="mb-1">
                  <input type="number" class="form-control" v-model="quantity">
                </div>
            </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @click="cleanCurrentFood()">Fermer</button>
          <button type="button" class="btn btn-danger">Réinitialiser</button>
          <button type="button" class="btn btn-primary" @click="addQuantity()">Ajouter</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import { mapActions, mapGetters } from 'vuex'

import { Food } from '../../domain/food'
import { SelectedFood, Nutrients } from '../../domain/store/OrganizeMealState'

@Options({
  computed: {
    ...mapGetters({
      currentFood: 'OrganizeMeal/currentFood',
      selectedFoods: 'OrganizeMeal/selectedFoods',
      nutrients: 'OrganizeMeal/nutrients'
    })
  },
  methods: {
    ...mapActions({
      setFoodQuantity: 'OrganizeMeal/setFoodQuantity',
      cleanCurrentFood: 'OrganizeMeal/cleanCurrentFood'
    }),

    addQuantity () {
      this.setFoodQuantity({
        food: this.currentFood,
        quantity: this.quantity
      })
    }
  }
})
export default class AddFoodQuantityModal extends Vue {
  currentFood!: Food
  selectedFoods!: SelectedFood[]
  nutrients!: Nutrients

  quantity = 0
}
</script>

Here is my modal

If you need to see more code, I share you github project here : https://github.com/wyllisMonteiro/diet-helper

Use devtools result

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

const app = createApp(App).use(store).use(router).mount('#app')

// eslint-disable-next-line
// @ts-ignore: Unreachable code error
app.config.performance = true

• npm run build
• Use this extension to serve : https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

and got this