How to set compilerOptions.isCustomElement for VueJS 3 in Laravel project

Question

I'm working on VueJS 3 inside Laravel project and I'm using a JS file which providing me with elements that I use for markdown toolbar. Basically it's a set of functions that provides me with buttons that applies the selected markdown option. Everything works just fine but I'm getting those console errors that I want them to gone.

They are all similar to this one:

Failed to resolve component: md-linedivider
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <Markdowntoolbar> 
  at <Article onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition enter-active-class="animate__animated animate__fadeInLeft" leave-active-class="animate__animated animate__bounceOutUp" mode="out-in" > 
  at <RouterView> 
  at <App> 
  at <Bodycomponent> 
  at <App>

This is saying that md-linedivider element should be excluded from component resolution via compilerOptions.isCustomElement. And I really looked everywhere for a solution and I only found this one but I don't have vue.config.js in my laravel project to apply that to. I tried to do this in webpack.mis.js and app.js but it didn't work.

Does anyone has any idea?

Answer 1

Try this in your webpack.mix.js

mix.js('resources/assets/js/app.js', 'public/js').vue({
  options: {
    compilerOptions: {
      isCustomElement: (tag) => ['md-linedivider'].includes(tag),
    },
  },
});

---

UPDATE 4.8.22 - for Vite projects: vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => ['md-linedivider'].includes(tag),
        }
      }
    })
  ]
})

Answer 2

For Nuxt3 you can set value in nuxt.config.ts as shown blow.

export default defineNuxtConfig({
  vue: {  
    compilerOptions: {
      isCustomElement: (tag) => ['lite-youtube'].includes(tag),
    },
  }
})

Answer 3

vue.js with vite:

in your vite.config.js/ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => {
            return tag.startsWith('ion-') // (return true)
          }
        }
      }
    })
  ]
})

---

With a Vue.js that includes the runtime compiler (aka "full build") you can do it this way:

in your main.js/ts

// treat all tags starting with 'ion-' as custom elements
app.config.compilerOptions.isCustomElement = (tag) => {
  return tag.startsWith('ion-') // (return true)
}

see vue3 docs on this topic: https://vuejs.org/api/application.html#app-config-compileroptions

Answer 4

Also i have faced this mistake in Vue3, in the code i wrote component : but it must be components . I think it gives that warning in typing errors.

Answer 5

TL;DR

Vue likes to know if the developer use custom Elements. For this case you can use the Vue compnents property.

import MdLinedivider from "../path/file.vue";

export default {
  components: {
    MdLinedivider
  },
  ...
}

Afterwards then you can use: <md-linedivider /> or <MdLinedivider /> Tag in your HTML.

Answer 6

In my case, I had a global component named view, but i used it as View。 That's why I got the warning.

Answer 7

This library deals with custom components, very straightforward: https://github.com/antfu/unplugin-vue-components

// vite.config.ts
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({ /* options */ }),
  ],
})

Answer 8

In my case, Vue 3 and Vite project, the issue was that I defined components as an array instead of an object.

import MyComponent from "@/components/common/MyComponent";
//components: [MyComponent] <-- DID NOT work 
components: {MyComponent}

Answer 9

I faced the same problem, I omitted setup attribute inside the script tag.

Answer 10

If you create two components property

  components: {
    Field
  },
  
  components: {
    Test
  }

in your js file, you will face this issue.

Answer 11

Is your app not working properly after adding compilerOptions? ... Read below...

---

Your warnings may had cleared out after implementing something like so:

I'm using Vuetify, so I needed to add all the custom elements starting with v-

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => {
            return tag.startsWith('v-') 
          }
        }
      }
    })
  ]
})

Clearing out the warnings is a good thing, but if your app is NOT working properly anymore, consider creating a vitest.config.ts file.

This way the Vitest test script will do the testings using a different configuration specified in vitest.config.ts and the build or dev script will use the configuration specified in vite.config.ts.

To do this:

Copy paste your code from vite.config.ts into vitest.config.ts and remove the compilerOptions or template from the vue() plugin, leaving your vite.config.ts the way it was.

Make sure to follow the configuration properly in the docs

And it will all work as nice as it can get ✔️

Answer 12

After 10 hours of trying, it turned out that in my particular case, the child component was importing the parent component - even though it was not used and was just left over from refactoring and rearranging the code. The simple fact that it imported it seemed to confuse the order in which components are created.