CODEWITHSUNDEEP
vue.jsbootstrap-icons
Erhnam
Erhnam

Reputation: 921

If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement

I'm clueless about an error message that keeps coming back. I'm transforming my existing Vue2 codebase to Vue3. I'm also ditching the existing icon package as it is incompatible with Vue 2. Instead I'm now using https://github.com/tommyip/bootstrap-icons-vue

When properly configured, I get the following error message:

*[Vue warn]: Failed to resolve component: b-icon-heart-fill
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <Sidebar onModal=fn<bound modalClick> > 
  at <AsyncComponentWrapper onModal=fn<bound modalClick> > 
  at <App>*

I using the following (simplified) template code:

<template>
  <b-icon-heart-fill />
</template>

And this for the Vue code:

// Importing all icons
import { BIconHeartFill } from 'bootstrap-icons-vue';
export default {
  components: {
    draggable,
    BIconHeartFill,
    BIconCheckCircleFill,
    BIconFire,
    BIconStarFill
  }
}

Any idea what goes wrong here?

Upvotes: 4

Views: 4442

Answers (1)

Jason
Jason

Reputation: 1138

In your vue.config.js you probably need something like this:

  chainWebpack(config) {
    config.module
      .rule('js')
      .use('babel-loader')
      .tap((options) => {
        return {
          rootMode: 'upward',
        }
      })
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap((options) => {
        return {
          prettify: false,
          compilerOptions: {
            isCustomElement: (tag) => tag.startsWith('b-icon'),
          },
        }
      })
    config.externals(['vue', 'vuetify', 'vuex', 'vue-router'])
  },
``

Upvotes: 0

Related Questions