VUE: Error `Cannot use 'in' operator to search for 'path' in undefined`; infinite loop; did check similiar question on Stackoverflow. github,web below

This is just my demo for learning purpose you can look at my full code at github: https://github.com/tNhanDerivative/nhanStore_frontEnd and my domain: vuestore.nhan-thenoobmaster.com
I don't see this error at my local machine but when I deploy my app on server. This happen. When I try to serve npm run serve these Error also does not appear. Only appear when I serve built file dist/ from my server

Cannot use 'in' operator to search for 'path' in undefined
    at Object.j [as resolve] (vue-router.mjs:3015:13)
    at w.fn (vue-router.mjs:2157:41)
    at w.run (reactivity.esm-bundler.js:190:25)
    at get value [as value] (reactivity.esm-bundler.js:1171:39)
    at w.fn (vue-router.mjs:2159:35)
    at w.run (reactivity.esm-bundler.js:190:25)
    at get value [as value] (reactivity.esm-bundler.js:1171:39)
    at w.fn (vue-router.mjs:2184:60)
    at w.run (reactivity.esm-bundler.js:190:25)
    at get value [as value] (reactivity.esm-bundler.js:1171:39)

Here is my router/index.js file. I have tried change history: createWebHistory(process.env.BASE_URL) to history: createWebHistory(). It does nothing
I also checked all the router-link all has to property

import { createRouter, createWebHistory } from 'vue-router'

import store from '../store'

import HomeView from '../views/HomeView.vue'


import ProductView from '../views/ProductView.vue'
import CategoryView from '../views/CategoryView.vue'
import SearchView from '../views/SearchView.vue'
import CartView from '../views/CartView.vue'
import SignUpView from '../views/SignUpView.vue'
import LogInView from '../views/LogInView.vue'
import MyAccountView from '../views/MyAccountView.vue'
import CheckoutView from '../views/CheckoutView.vue'
import SuccessView from '../views/SuccessView.vue'



  const routes = [
  {
    path: '/',
    name: 'Home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'AboutView',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path: '/sign-up',
    name: 'SignUp',
    component: SignUpView
  },
  {
    path: '/log-in',
    name: 'LogIn',
    component: LogInView
  },
  {
    path: '/my-account',
    name: 'MyAccount',
    component: MyAccountView,
    meta: {
        requireLogin: true
    }
  },
  {
    path: '/search',
    name: 'Search',
    component: SearchView
  },
  {
    path: '/cart',
    name: 'Cart',
    component: CartView
  },
  {
    path: '/cart/success',
    name: 'SuccessView',
    component: SuccessView
  },
  {
    path: '/cart/checkout',
    name: 'CheckoutView',
    component: CheckoutView,
    meta: {
        requireLogin: true
    }
  },
  {
    path: '/:category_slug/:product_slug',
    name: 'Product',
    component: ProductView
  },
  {
    path: '/:category_slug',
    name: 'Category',
    component: CategoryView
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requireLogin) && !store.state.isAuthenticated) {
    next({ name: 'LogIn', query: { to: to.path } });
  } else {
    next()
  }
})

export default router

Also for some reason it create an infinite loop for component ProductBox use inside HomView.vue.

You can see inside HomeView.vue the method getLatestProducts() hook mounted make an axios api call, updated latestProducts data and cause ProductBox to rerender.

I have tried different hook for Axios call beforeCreated() and created(). It doesn't work.
This is where I use the component
HomeView.vue

<template>
  <div class="home">
    <section class="hero is-medium is-dark mb-6">
        <div class="hero-body has-text-centered">
            <p class="title mb-6">
                Welcome to NoobStore
            </p>
            <p class="subtitle">
                The most honest store online don't sell you anything
            </p>
        </div>
    </section>

    <div class="columns is-multiline">
      <div class="column is-12">
          <h2 class="is-size-2 has-text-centered">Latest products</h2>
      </div>

      <ProductBox 
        v-for="product in latestProducts"
        v-bind:key="product.id"
        v-bind:product="product" />
    </div>
  </div>
</template>

<script>
import axios from 'axios'

import ProductBox from '@/components/ProductBox'

export default {
  name: 'HomeView',
  data() {
    return {
      latestProducts: []
    }
  },
  components: {
    ProductBox
  },
  mounted() {
    this.getLatestProducts()

    document.title = 'Nhan`s Store | Vuejs demo'
  },
  methods: {
    async getLatestProducts() {
      this.$store.commit('setIsLoading', true)
      try {
        const res = await axios.get('/api/v1/latest-products/')
        this.latestProducts = res.data
      } catch(error) {
      console.log(error)
      }

      this.$store.commit('setIsLoading', false)
    }
  }
}

check your api response, not expected. you got an html page not json