javascriptlaravelvue.jscompiler-errorsvuejs3

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


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?


Solution

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