Debugging Runtime-core.esm-bundler.js Error in Productions

[eboraks]

Hello there,

I scaffolded a Vue project with Vue CLI (webpack) and everything is working well on local development, but when I deploy to production (using Firebase hosting) I get the following error:

TypeError: Failed to fetch at i (useLibrary.js:23:31) at Library.vue:24:15 at runtime-core.esm-bundler.js:2865:88 at s (runtime-core.esm-bundler.js:195:19) at a (runtime-core.esm-bundler.js:202:17) at Le.t.__weh.t.__weh (runtime-core.esm-bundler.js:2845:19) at E (runtime-core.esm-bundler.js:370:26) at A (runtime-core.esm-bundler.js:408:5)

The fetch is working, I manually tested the fetch call on the browser, and I see successful responses from the backend API. Thus, I am certain the fetch isn't the problem.

After Googling around, and reading this doc - https://vuejs.org/guide/best-practices/production-deployment, I suspect that the problem is with the Vue.JS set-up by vue-cli but it's not clear to me how to debug it. Here is the package.json:

{
  "name": "icognition-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --mode development --host 0.0.0.0 --port 8080",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.8",
    "bootstrap": "^5.3.3",
    "bootstrap-icons": "^1.11.3",
    "core-js": "^3.8.3",
    "firebase": "^10.9.0",
    "firebase-admin": "^12.0.0",
    "firebase-functions": "^4.8.2",
    "node-polyfill-webpack-plugin": "^3.0.0",
    "primeflex": "^3.3.1",
    "primeicons": "^7.0.0",
    "primevue": "^3.50.0",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-service": "~5.0.0"
  }
}

Any suggestion on how to debug it, will be appreciated.