Object(...) is not a function when loading mdicon

[EmBeaux]

I am trying to utilize <mdicon name="react" />, as per the readme, and upon render of the Icon I get a full screen error stating Object(...) is not a function.

Vue Plugin

import Vue from 'vue';
import mdiVue from 'mdi-vue/v3'
import * as mdijs from '@mdi/js'

Vue.use(mdiVue, {
    icons: mdijs
});

nuxt.config.js

export default {
  ...
  plugins: [
    '@/plugins/framevuerk',
    '@/plugins/VueMq',
    '@/plugins/vue-mdi',
    { src: '@/plugins/vue-calendly', ssr: false },
    { src: '@plugins/vue-burger-menu', ssr: false }
  ],
  ...
  build: {
    transpile: ['mdi-vue']
  }
}

Template in Vue Component

<div class="grid-item">
   <h3 class="grid-item-title">Grid Item </h3>
   <p class="grid-item-description">Grid item description. </p>
   <button
       type="button"
       class="fv-button fv-secondary image-button"
       v-on:click="isModalVisible = true"
   >
        Schedule A Consult
   </button>
   <mdicon name="react" /> 
</div>

I am importing nothing in the Vue script tags because I figured the plugin would take care of that.

[EmBeaux]

Solved this by changing my plugin import to utilize v2 instead of v3. This was a mistake on my end. Resolved.

import Vue from 'vue';
// Wrong
// import mdiVue from 'mdi-vue/v3'

// Correct
import mdiVue from 'mdi-vue/v2'
import * as mdijs from '@mdi/js'

Vue.use(mdiVue, {
    icons: mdijs
});