[Vue warn]: Failed to resolve component: swiper-slide and swiper-container when using Swiper Element

Question

I'm using Swiper Element for slide effects in a Vue app, it works fine but I keep getting these two warnings,

[Vue warn]: Failed to resolve component: swiper-slide If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

[Vue warn]: Failed to resolve component: swiper-container If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

I installed the package and registered it just like the docs recommended, I tried both at main.js and another time at App.vue, but it didn't make a difference.

// import register function to register Swiper custom elements
import { register } from 'swiper/element/bundle';
// register Swiper custom elements
register();

after that, I tried to add it as a custom element manually (I think this is the job of the register function) using instructions from Vue docs, Vue cli docs and Vue Loader docs like the following

vue.config.js

...
chainWebpack: (config) => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap((options) => {
        // modify the options...
        options.compilerOptions = {
          isCustomElement: (tag) => {
            return tag.startsWith('swiper');
          },
        };
        return options;
      });
  },
...

but still, nothing is different, this is my first time modifying the loader so I think I'm missing something In syntax it wasn't apparent how to modify the isCustomElement in vue.config.js

any help would be appreciated, my main goal is to remove the warnings so if you have any other approach I'd love to hear it.

build Data:

    "swiper": "^10.3.1"
    "vue": "^3.2.13"
    "@vue/cli-service": "~5.0.0",

Answer 1

it worked, I had to re-run serve the code works. :) that was fun