Autocomplete template not working in Nuxt

[Marco Rizzato]

Good morning,

I'm trying to use the custom template in the autocomplete (inside a Nuxt environment).
I followed the example in your documentation (you can find an example HERE) but in the console I get this error:

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

The problems has occured from the 19.2.x version, in the 19.1.x there was not).

Thanks.
Marco

[Deepak Ramakrishnan]

Hi Marco, 

 

Greetings from Syncfusion support. 

 

We are currently validating the reported issue in our end  . Also we can able to reproduce it with the provided sample . We will update the possible details in two business days (14^th,October 2021). 

 

Thanks, 

Deepak R. 

 

[Deepak Ramakrishnan]

Hi Marco, 

 

Greetings from Syncfusion support. 

 

We have validated the reported issue in our end , and we suspect that the problem is due to that your vue version needs template compiler to execute the application. So we suggest you to try the solution provided in the below blogs to get rid of the issue in your end. 

 

https://stackoverflow.com/questions/47332728/you-are-using-the-runtime-only-build-of-vue-where-the-template-compiler-is-not-a

https://stackoverflow.com/questions/52249045/error-with-vue-cli-component-you-are-using-the-runtime-only-build-of-vue-where 

 

https://github.com/vuejs/vue-cli/issues/2754 

 

Also we suggest you to refer the below getting started page and check the prerequisites are configured correctly in your end. 

 

 

https://ej2.syncfusion.com/vue/documentation/auto-complete/getting-started/ 

 

 

Thanks, 

Deepak R. 

[Marco Rizzato]

Hi Deepak,
thanks for the reply!

The solution is to add this line in the nuxt.config.js:

  build: {

    extend(config) {

      config.resolve.alias.vue = 'vue/dist/vue.common'

    }

  }

But in my project I have also a syncfusion grid and the previous line causes an error on it:

TypeError: Cannot read properties of undefined (reading 'slots')

    at GridComponent.eval (vue-class-component.esm-bundler.js?f8c7:256)

    at GridComponent.ComponentBase.fetchChildPropValues (component-base.js?57d6:156)

    at GridComponent.ComponentBase.bindProperties (component-base.js?57d6:135)

    at new GridComponent (grid.component.js?c041:60)

    at collectDataFromConstructor (component-decorator.js?b1ca:136)

    at VueComponent.data (component-decorator.js?b1ca:99)

    at getData (vue.common.dev.js?4650:4754)

    at initData (vue.common.dev.js?4650:4711)

    at initState (vue.common.dev.js?4650:4650)

    at VueComponent.Vue._init (vue.common.dev.js?4650:5010)

I attach an empty Nuxt typescript project with only a grid and an autocomplete. 
If you remove the config.resolve.alias.vue = 'vue/dist/vue.common' you will see that the grid works and the autocomplete not, if you add it instead the opposite will happen.

Thanks,
Marco

Attachment: syncfusiontest_95cf003f.zip

[Rajapandiyan Settu]

Hi Marco, 

Thanks for your update. 

Currently, we are validating the reported problem (“[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build”) with your sample and we need some time on this. So, we will update the further details on or before Oct 20^th 2021. 

We appreciate your patience until then. 

Regards, 

Rajapandiyan S 

[Rajapandiyan Settu]

Hi Marco, 

Thanks for your patience. 

We have run the attached sample at our end. The AutoComplete and Grid components are rendered properly in our machine. Find the below video demo for your reference. 

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/video_nuxt_sample_running-458047005.zip 

Find the npm and node js version used in our machine. 

Screenshot: 

 

We suspect that the issue may raise because of duplicate packages. We suggest you to follow the below steps to resolve this. 

1. Delete package.lock.json file from your application.
2. Delete the node_modules in your project.
3. Use latest version or ‘*’ for all the Syncfusion components in package.json file.
4. Then execute npm install to install the new packages.

UG Link: https://ej2.syncfusion.com/vue/documentation/common/how-to/update-npm-package/ 

Also, use npm dedupe to remove the duplicate packages. 

Still, if you face the same problem, please share the node js and npm version used in your project to check the issue with same version at our end. 

Regards, 

Rajapandiyan S