str.match is not a function encountered when setting itemTemplate of ejs-dropdownlist

Question

I can work with an ejs-dropdownlist fine, up to the point where I want to set the itemTemplate. The control otherwise seems to work fine for me aside from anything templating-related, however that templating functionality is the main reason I want to use the control.

As soon as I click the button to open the drop down, I get this error:

template.js?f0a9:71 Uncaught TypeError: str.match is not a function

at evalExp (template.js?f0a9:71)

at compile (template.js?f0a9:58)

at Object.Engine.compile (template-engine.js?e2e8:130)

at compile (template-engine.js?e2e8:21)

at Object.renderContentTemplate (list-base.js?a397:513)

at DropDownList.DropDownBase.templateListItem (drop-down-base.js?a232:751)

at DropDownList.DropDownBase.renderItems (drop-down-base.js?a232:730)

at Observer.eval (drop-down-base.js?a232:502)

at Observer.notify (observer.js?851a:102)

at DropDownList.Base.trigger (base.js?b7de:181)

My component is minimal and can be shared here:

<template>
    <ejs-dropdownlist
        :dataSource="projects"
        :fields="projectsFields"
        :itemTemplate="itemTemplate"
        placeholder="Select Project"
        @select="handleItemSelect"
    ></ejs-dropdownlist>
</template>

<script>
import Vue from 'vue';

const itemVue = Vue.component('itemTemplate', {
    template: `<span><span class='name'>HEY</span><span class ='city'>YOU</span></span>`,
    data() {
        return {
            data: {
            },
        };
    },
});

export default {
    name: 'ProjectChooser',
    data: () => {
        return {
            itemTemplate: function() {
                return { template: itemVue };
            },
        };
    },
    computed: {
        project() {
            return this.$store.state.projects.currentProject;
        },
        projects() {
            return this.$store.state.projects.projects;
        },
        projectsFields() {
            return { text: 'name', value: 'uniqueName' };
        },
    },
    methods: {
        handleItemSelect(e) {
            const project = e.itemData;
            this.$store.dispatch('projects/selectProject', project);
        },
    },
};
</script>

Again, if I remove the :itemTemplate="itemTemplate" line, no errors are encountered.

Obviously, some piece of JavaScript isn't being included, but I'm not sure what I need to import or do in Main.js beyond what I'm already doing:

import { InPlaceEditorPlugin } from '@syncfusion/ej2-vue-inplace-editor';
import { RichTextEditorPlugin } from '@syncfusion/ej2-vue-richtexteditor';
import { DropDownButtonPlugin } from '@syncfusion/ej2-vue-splitbuttons';
import { TreeViewPlugin } from '@syncfusion/ej2-vue-navigations';
import { DropDownListPlugin } from '@syncfusion/ej2-vue-dropdowns';

Vue.config.productionTip = false;

// Syncfusion Controls
Vue.use(InPlaceEditorPlugin);
Vue.use(RichTextEditorPlugin);
Vue.use(DropDownButtonPlugin);
Vue.use(DropDownListPlugin);
Vue.use(TreeViewPlugin);

From searching, I see that this error is common in Angular and React projects, but have yet to see a mention of it in Vue. Most of those forums seem to have generic "Cannot reproduce" messages back from support, which are not helpful.

Relevant package includes:

"@syncfusion/ej2-data": "^18.3.42",
"@syncfusion/ej2-vue-dropdowns": "^18.3.44",
"@syncfusion/ej2-vue-inplace-editor": "^18.3.40",
"@syncfusion/ej2-vue-navigations": "^18.3.42",
"@syncfusion/ej2-vue-richtexteditor": "^18.3.42",
"@syncfusion/ej2-vue-splitbuttons": "^18.3.40",

Sevvandhi Nagulan · Accepted Answer

Hi Matt,  



Greetings from Syncfusion support. 

  
We made sample with the provided code snippet and we can reproduce the mentioned issue.  The cause for the issue is that duplicate packages were installed in the application. Generally duplicate package will be installed when there is any version mismatch between the packages. To resolve the reported issue in your end, kindly follow the steps given in the following UG documentation.      
      
UG Link: https://ej2.syncfusion.com/vue/documentation/common/how-to/update-npm-package/ 


Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Template1069808843 
 

Please check the above suggestion and get back to us if you need further assistance. 


Regards, 
Sevvandhi N