Missing package?

[Tom McNeer]

Hi,

When trying to use the datepicker component, I get:

"export 'DatePickerPlugIn' was not found in '@syncfusion/ej2-vue-calendars'   

vue 2.6.12

ej2-vue-calendars 18.3.35

nuxt 2.14.6

I also see a warning:
npm WARN @syncfusion/[email protected] requires a peer of [email protected] - 2.6.11 but none is installed. You must install peer dependencies yourself.

Perhaps an update needed?

[Praveenkumar Gajendiran]

Hi Tom,

Greetings from Syncfusion support.


We are not clear about the exact scenario in which you are facing the reported problem. Please let us know if the issue occurs inside the Grid or outside the Grid.

If you want to use the DatePicker component inside the Grid, you must render the DatePicker component through the template feature. Please check the below code example and sample for your reference.

Code Example: 

 <template> 

  <div id="app"> 

    <ejs-grid :dataSource="data"> 

      <e-columns> 

        <e-column 

          headerText="Order Status" 

          :template="datepickerTemplate" 

          width="200" 

        ></e-column> 

      </e-columns> 

    </ejs-grid> 

  </div> 

</template> 

<script> 

import Vue from "vue"; 

import { GridPlugin } from "@syncfusion/ej2-vue-grids"; 

import { data } from "./datasource.js"; 

import { DatePickerPlugin } from "@syncfusion/ej2-vue-calendars"; 

Vue.use(GridPlugin); 

Vue.use(DatePickerPlugin); 

export default { 

  data() { 

    return { 

      data: data, 

      datepickerTemplate: function () { 

        return { 

          template: Vue.component("bindDatepicker", { 

            template: `<ejs-datepicker placeholder="Select a date"></ejs-datepicker>`, 

          }), 

        }; 

      }, 

    }; 

  }, 

}; 

</script> 

Sample: https://codesandbox.io/s/272413-getselectedrowsfrom-cell-forked-nt1hz?file=/src/App.vue 

 

If this does not meet your requirement, please share the below details 

1. Code example
2. Issue reproducible sample or modify the above sample if it is possible.
3. Video demonstration about your issue.
4. Let us know if you have rendered the DatePicker inside the Grid or outside of the Grid

 

Regards,
Praveenkumar G 

[Tom McNeer]

Sorry, I should have been clearer. The error occurs within a column template. Here is the definition in the grid:

<e-column

:template="treatmentDateTemplate"

headerText="Trtmt. Date"

textAlign="center"

width="90"

></e-column>

treatmentDateTemplate: function() {

return {

template: TreatmentDateColumn

}

}

And here is the column template:

<template>

<div>

<div v-if="$data.data.TreatmentDate">

{{ $data.data.TreatmentDate | dateOnly }}

</div>

<div v-else-if="$data.data.ProcedureStatus === 'Approved'">

<ejs-datepicker

placeholder="Choose a Date"

v-model="$data.data.TreatmentDate"

@change="setTreatmentDate"

></ejs-datepicker>

</div>

</div>

</template>

<script>

import { DatePickerPlugIn } from '@syncfusion/ej2-vue-calendars'

Vue.use(DatePickerPlugIn)

export default {

name: 'TreatmentDateColumn',

inheritAttrs: false,

methods: {

setTreatmentDate() {}

}

}

</script>

<style></style>

The error occurs in the column template. Versions of packages are noted in the first message.

Thanks.

[Praveenkumar Gajendiran]

Hi Tom,

Thanks for your update.


We checked your query and provided code example. Based on that we have prepared a sample and everything works properly. 

We suspect you might be facing the problem due to packages not installed properly or may be packages conflict or duplicate packages. So please upgrade your NPM packages and make sure all your Syncfusion dependency package should be in latest version only.

Please follow the below document to upgrade your dependency package to latest version.

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

Regards,
Praveenkumar G

[Tom McNeer]

No luck. All npm packages updated and deduped.

package.json shows the following for syncfusion packages:

"@syncfusion/ej2-vue-calendars": "^18.3.35",

"@syncfusion/ej2-vue-dropdowns": "^18.3.35",

"@syncfusion/ej2-vue-grids": "^18.3.35",

"@syncfusion/ej2-vue-popups": "^18.3.35",

But when the template sent in my earlier message is compiled, I still get:

"export 'DatePickerPlugIn' was not found in '@syncfusion/ej2-vue-calendars'"

Did your test use the Vue and Nuxt versions specified in my post?  

[Praveenkumar Gajendiran]

Hi Tom,

Thanks for your update.

We have created a new incident under your Direct trac account to follow up with this query. We suggest you to follow up with the incident for further updates. Please log in using the below link.     

https://www.syncfusion.com/account/login  

Regards,
Praveenkumar G