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?
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),
},
},
});
In my case, I had a global component named view, but i used it as View。 That's why I got the warning.