Vue warn Failed to resolve component: ion-icon

Question

Following the usage at https://ionicons.com/usage, the ion-icon displays but I get this warning:

Failed to resolve component: ion-icon 

My steps were:

• I used @vue/cli@4.5.11 to create a new app (vue create projectname)
• added <ion-icon name="heart"></ion-icon> to HelloWorld.vue
• added <script type="module" src="https://unpkg.com/ionicons@5.0.0/dist/ionicons/ionicons.esm.js"></script> to public/index.html

I've tried app.config.isCustomElement = tag => tag.startsWith('ion') which created another warning saying the option is only respected when using the runtime compiler, but I was able to suppress it by adding a vue.config.js with module.exports = {runtimeCompiler: true}. No effect on the ion-icon warning. This might be linked to needing to use a custom vue-loader but is there an easy way to get rid of this warning?

Answer 1

The full warning from using app.config.isCustomElement provides a useful clue:

The isCustomElement config option is only respected when using the runtime compiler. If you are using the runtime-only build, isCustomElement must be passed to @vue/compiler-dom in the build setup instead- for example, via the compilerOptions option in vue-loader: https://vue-loader.vuejs.org/options.html#compileroptions.

You could modify vue-loader's compilerOptions in vue.config.js to configure isCustomElement:

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        options.compilerOptions = {
          ...options.compilerOptions,
          isCustomElement: tag => tag.startsWith('ion-')
        }
        return options
      })
  }
}