vue.jsionicons

Vue warn Failed to resolve component: ion-icon


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'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?


Solution

  • 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
          })
      }
    }