v-icon mergeDeep recursive loop Maximum call stack size exceeded

[dseidl]

Hey,

i've just upgraded to the new version (from 0.x/vuetify 1.5.x). After the upgrade i had after a time (3-5 page reloads) the error Maximum call stack size exceeded in the mergeDeep function in vuetify helpers.ts. After some isolation i found that the cause was the v-icon component. Or more the way i included my svg icons.

My icon implementation was this nuxt plugin: (most of the time the suggested way to add them in vuetify docs/stack overflow answers, ...)

import Vue from 'vue'
import Vuetify from 'vuetify'
import { library, config } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faAnchor } from '@fortawesome/pro-light-svg-icons'

config.autoAddCss = false
Vue.component('font-awesome-icon', FontAwesomeIcon) // Register component globally

library.add(faAnchor)

Vue.use(Vuetify, {
  iconfont: 'faSvg',
  icons: {
    anchor: {
      component: FontAwesomeIcon,
      props: {
        icon: ['fal', 'anchor']
      }
    },
  }
  // other icons
}

I've updated that plugin file accordingly to the new vuetify docs: (following only the parts that have changed!)

import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'faSvg',
    values: {
      anchor: {
        component: FontAwesomeIcon,
        props: {
          icon: ['fal', 'anchor']
        }
    },
  }
  // other icons
  },
})

What worked for me in the end - i had to add the icons not through a nuxt plugin, but instead through the new optionsPath file. The file that optionsPath point to was mostly the same content. Except not importing vuetify of course and exporting like in the docs of this module:

export default {
  icons: {
    iconfont: 'faSvg',
    values: {
      anchor: {
        component: FontAwesomeIcon,
        props: {
          icon: ['fal', 'anchor']
        }
      },
    }
  }
}

I dont know if thats the right place, but i hope that it helps someone with the same issue solving it faster 😄 i searched the issues for that.

[cesxhin]

Hi, i have same problem, i try copy by you but not work.

package.json

dependencies:{
    ...
    "@fortawesome/fontawesome-pro": "^5.15.3",
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-solid-svg-icons": "^6.2.0",
    "@fortawesome/pro-light-svg-icons": "^5.15.3",
    "@fortawesome/pro-regular-svg-icons": "^5.15.3",
    "@fortawesome/pro-solid-svg-icons": "^5.15.3",
    "@fortawesome/vue-fontawesome": "^2.0.8",
    "vuetify": "^2.6.12"
    ...
},
devDependencies:{
    ...
    "@nuxtjs/vuetify": "^1.12.3"
    ...
}

nuxt.config.js

buildModules: [
    '@nuxtjs/vuetify'
  ],
vuetify: {
    customVariables: ['~/assets/variables.scss'],
    optionsPath: "~/plugins/vuetify-options.js",
    defaultAssets: {icons: 'fa'}
  },

vuetify-options.js

import Vue from "vue";
import colors from 'vuetify/es5/util/colors';

import { library, config } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

import { fas as fasFree } from '@fortawesome/free-solid-svg-icons'
import { fas } from '@fortawesome/pro-solid-svg-icons'
import { fal } from '@fortawesome/pro-light-svg-icons'
import { far } from '@fortawesome/pro-regular-svg-icons'

config.autoAddCss = false

library.add(fas);
library.add(fal);
library.add(far);
library.add(fasFree);

Vue.component('font-awesome-icon', FontAwesomeIcon);
const MY_ICONS={
test:{
    component: FontAwesomeIcon,
    props: {
      icon: ['fas', 'volume'],
    },
  },
test2:{...},
...
}

export default {
  theme: {...},
  icons: {
    iconfont: 'faSvg',
    values: MY_ICONS
  }
}

after 3-5 page reloads, there is this error Maximum call stack size exceeded. I try remove library of fal, far and includes someone icons that I need but not work anyway.

If i build project, it work without problems.

I wrong something?