1. Home
  2. Forum
  3. Vue
  4. DateRangePicker TypeError

DateRangePicker TypeError

Hi,

After I upgrade the Syncfusion dependencies to V20.1.47, I encounter a problem that DateRangePicker's enabled property can cause the following error shown in the console.

Uncaught (in promise) TypeError: this.$.slots.default is not a function

at Proxy.push../node_modules/@syncfusion/ej2-vue-base/src/component-base.js.ComponentBase.fetchChildPropValues (component-base.js:189:1)

at Proxy.push../node_modules/@syncfusion/ej2-vue-base/src/component-base.js.ComponentBase.updated (component-base.js:136:1)

at callWithErrorHandling (runtime-core.esm-bundler.js:155:1)

at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:164:1)

at Array.hook.__weh.hook.__weh (runtime-core.esm-bundler.js:2667:1)

at flushPostFlushCbs (runtime-core.esm-bundler.js:356:1)

at flushJobs (runtime-core.esm-bundler.js:401:1)

I was wondering if this is a bug in the latest version.

Regards,

Arvin

P.S.

1. The demo developed uses Vue.js 3 + Electron 18.

2.

<ejs-daterangepicker
@blur="removeErrorBorder(global.common.DATE_RANGE_PICKER_NAME)"
@focus="removeErrorBorder(global.common.DATE_RANGE_PICKER_NAME)"
@open="removeErrorBorder(global.common.DATE_RANGE_PICKER_NAME)"
@renderDayCell="disableWeekends"
:dayHeaderFormat="global.common.SF_NARROW"
:enabled="isEnabled"
:endDate="new Date(`${endDate}${global.common.DAY_TIME_START}`)"
:max="new Date()"
:maxDays="7 * 4 * maxDateRangeSpan"
:min="new Date(`${minDate}${global.common.DAY_TIME_START}`)"
:name="global.common.DATE_RANGE_PICKER_NAME"
:placeholder="zhCN.default.dateRangePlaceholder"
:ref="global.common.DATE_RANGE_PICKER_NAME"
:startDate="
new Date(`${startDate}${global.common.DAY_TIME_START}`)
"
/>

isEnabled is defined as false (bool) in data If we use ':enabled="true"' instead, the error does not occur on my end.

3. Btw, I encountered the same issue for the Grid component, and I cannot find which property causes this issue. I can confirm that everything is fine when I return to V19.4.53


24 Replies 1 reply marked as answer
PM Ponmani Murugaiyan Syncfusion Team April 6, 2022 12:18 PM UTC

Hi Arvin,


Based on your shared information, we checked your reported query, but we were unable to replicate the issue in our end. Please find the sample and code snippet below for refence.


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Daterange737832163


<template>

    <div class="wrap">

      <ejs-daterangepicker id="daterangepicker" :enabled="isEnabled" :placeholder="waterMarkText"></ejs-daterangepicker>

    </div>

</template>

 

<script>

import Vue from 'vue';

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

Vue.use(DateRangePickerPlugin);

 

  export default {

    name: 'HelloWorld',

    data: function() {

        return {

          waterMarkText: "Select a Range",

          isEnabled: false,

        };

    },

};



Kindly check with the above sample, if issue still exists in your end, please share the issue replicating sample to check and provide you the solution at earliest.


Regards,

Ponmani M


AS Arvin Staff replied to Ponmani Murugaiyan April 6, 2022 03:45 PM UTC

Hi Ponmani,

I have tried to clean the project and reinstalled all dependencies, but the issue still exists. As mentioned above, everything seems to be fine when I return to V19.4.53. I have attached the demo as follows. You could follow 5 and 6 in this link to configure the project. Once the configurations are in place and the demo is launched in dev mode, you could toggle the dev tools by Ctrl+Shift+I. I can see the above error message on my end. The corresponding components are at least SearchForm.vue and SearchResultGrid.vue.

Hope to know if anything is wrong. Thanks!

Regards,

Arvin


Attachment: Kobe_ea0be777.zip

DR Deepak Ramakrishnan Syncfusion Team April 10, 2022 03:05 PM UTC

Hi Arvin,


Thanks for providing additional information to replicate the issue. We will validate and update the details in two business days (12 April 2022).


Thanks,

Deepak R.


DR Deepak Ramakrishnan Syncfusion Team April 13, 2022 05:23 PM UTC

Hi Arvin,


Sorry for the inconvenience caused.


We need additional time to validate the issue further . We will update the details within two business days(19th, April 2022).


Thanks,

Deepak R.

AS Arvin Staff replied to Deepak Ramakrishnan April 25, 2022 03:24 AM UTC

Hi,


I still fail to sort out the issue. I was wondering if there is any update on your end.


Thanks much,

Arvin


MM Mohanraj Mathaiyan Syncfusion Team April 27, 2022 03:58 PM UTC

Hi CENK GUNAY,


Greetings from Syncfusion support.


We ensured the reported issue based on the shared details, We are used your shared sample and
tried to replicate your issue on our end but it’s not replicate on our end. We got error in this.invokeIpc() method in SearchForm.Vue file. So, we commented and ran it’s works fine We have attached the video sample for your reference. Please replicate your issue in attached sample and sent sample to us. This will help us provide a prompt solution.


Regards

Mohanraj M


Attachment: datepicker_video_3dc871f2.zip

AS Arvin Staff April 27, 2022 04:35 PM UTC

Hi,


Sorry but this demo is not developed as a web app. I use Vue.js 3 + Electron 18 for a cross-platform desktop app. Hence, using web browsers is not supported and that's why you will get errors in this.invokeIpc(), since IPC channels are used by Electron for desktop apps. Actually, I feel confused since I just use the IPC channels for updating some component properties.

Could you please follow the 5th and 6th points in this link to try again and see if you could get the aforementioned exception in the console integrated into the app (but not the browser)? The key accelerator is Ctrl+Shift+I.


Thanks,

Arvin


MM Mohanraj Mathaiyan Syncfusion Team April 29, 2022 04:20 AM UTC

Hi Arvin Staff,


We are currently validating your requirement and we will update further details in one business day (05/02/2022).


Regards,

Mohanraj M


MM Mohanraj Mathaiyan Syncfusion Team April 29, 2022 04:21 AM UTC

Hi Arvin Staff,


We are currently validating your requirement and we will update further details in two business day (05/02/2022).


Regards,

Mohanraj M


VJ Vinitha Jeyakumar Syncfusion Team May 2, 2022 12:57 PM UTC

Hi Arvin,


We have again tried to reproduce the reported issue by following the procedures provided in the link. but we are facing exception while running the command "npm ci". So, we have prepared a separate Vue.js 3 + Electron 18 project and used your code to replicate the issue. But unfortunately, we didn't face any issues. please check the sample below,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/news-app1020644124

Can you please provide a simple issue replicating sample or modify the attached sample with the issue reproducing code.

Regards,
Vinitha

AS Arvin Staff replied to Vinitha Jeyakumar May 2, 2022 11:40 PM UTC

Hi,


Have you tried to use "npm install" rather than "npm ci"? If not, could you please try to use "npm install" for my previous sample? I will try to provide another simplified sample as soon as possible at the same time.


Thanks,

Arvin


AS Arvin Staff replied to Vinitha Jeyakumar May 3, 2022 12:56 PM UTC

Hi,


I have attached a new sample for you. You can now run "npm install" and then "npm run electron:serve" under the root directory to run the desktop app. After the app starts, you can use the key accelerator (Ctrl + Shift + I) to open the chrome dev tools for the app and you may see the error indicating Uncaught (in promise) TypeError: this.$.slots.default is not a function.


This error is not necessarily related to the date range picker but "component-base". I can confirm that everything works well if I roll back to Syncfusion 19.4.54. No luck with any version higher.


I was wondering if you could help sort out the reason for the error. Thanks!


Regards,

Arvin


Attachment: Kobe_b60ef7ac.zip

UD UdhayaKumar Duraisamy Syncfusion Team May 3, 2022 01:34 PM UTC

Hi Arvin,


We are validating the requirement. We will update the further details in two business days (5th May 2022).


Regards,

Udhaya Kumar D


AS Arvin Staff replied to UdhayaKumar Duraisamy May 8, 2022 05:03 AM UTC

Hi,


Could you find out the cause of the issue? Is it a Syncfusion side problem or a project-specific problem caused by any other factors like compatibility issues?


Thanks,

Arvin


VJ Vinitha Jeyakumar Syncfusion Team May 10, 2022 02:21 PM UTC

Hi Arvin,


We can able to reproduce the reported issue using the sample you have shared and we need some time to further validate on the root cause of the issue.

So we will update you the further details on or before 12th May 2022.

Regards,
Vinitha

AS Arvin Staff replied to Vinitha Jeyakumar May 17, 2022 06:43 AM UTC

Hi,

I have updated the demo to use the latest Syncfusion. I can confirm that everything works well if I roll back to Syncfusion 19.4.54 (also remove the license since it's not needed in that version). No luck with any version higher.


What do you reckon causes the issue?


Regards,

Arvin


VJ Vinitha Jeyakumar Syncfusion Team May 23, 2022 01:40 PM UTC

Hi Arvin,


Sorry for the inconvenience caused,


Your reported issue can be resolved by setting Enabled property to false in the Updated event of Vue lifecycle hooks instead of initial rendering. please check the code and sample below,

Code snippet:
 return {
      appImagePath: path.join(process.env.BASE_URL, "assets/app_icon.png"),
      global,
      isEnabled: true,
      hasBarLayout: this.isBarLayout,
      maxDateRangeSpan: global.common.DEFAULT_MAX_DATE_RANGE_SPAN,
      minDate: global.common.MIN_MIN_DATE,
      stockList: [],
      stockListItemTemplate: () => {
        return {
          template: createApp().component("stockListItemTemplate", {
            template: `
              <div class="flex justify-between">
                <span class="text-grey-primary">{{ data[global.common.STOCK_SYMBOL_KEY] }}</span>
                <span class="text-content">{{ data[global.common.STOCK_NAME_KEY] }}</span>
              </div>`,
            data() {
              return { data: {}, global };
            },
          }),
        };
      },
      zhCN,
    };
  },
//The updated hook runs after data changes on your component and the DOM re-renders.
  updated(){
    this.isEnabled = false;
  },

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Kobe_Sampl302304793

Regards,
Vinitha

AS Arvin Staff replied to Vinitha Jeyakumar May 24, 2022 03:14 AM UTC

Hi,


Thanks for your reply!


Unfortunately, I don't reckon it actually solves the issue. The primary logic is that I need to disable the syncfusion components when starting the app (isEnabled=false). Then, after data is ready (notified via Electron's IPC channel event which is initialised in mounted()), enable the components (isEnabled = true).  If isEnabled is set to true at initial in data(), there is actually no data change on "isEnabled" as stated above. Hence, the updated hook is not triggered. The highlighted code in updated() takes no effect.


I have provided a new sample to comment out Electron IPC related code to better demonstrate the logic. In SearchForm.vue, you can see that simply changing the value of isEnabled (as long as it is different in data() and mounted()) can cause the exception in the console. Please NOTE that Syncfusion 19.4.54 or earlier has no such issue with the same code using Vue.js 3 + Electron 18.


Regards,

Arvin


P.S.

You can now run "npm install" and then "npm run electron:serve" under the root directory to run the desktop app. After the app starts, you can use the key accelerator (Ctrl + Shift + I) to open the chrome dev tools for the app and you may see the error indicating Uncaught (in promise) TypeError: this.$.slots.default is not a function.


Attachment: Kobe_alpha_fadcbdf0.zip

VJ Vinitha Jeyakumar Syncfusion Team May 24, 2022 02:24 PM UTC

Currently we are validating your reported query. we will update you the further details on or before 26th May 2022


VJ Vinitha Jeyakumar Syncfusion Team May 30, 2022 02:13 PM UTC

Hi Arvin,


We have checked your shared sample and we can be able to reproduce the reported issue in the latest version. but when we downgrade to the version 19.4.54 in your sample, it just shows a blank page and components not rendered properly.

Hence, we couldn't validate on the issue. So can you please share us with the sample which doesn't have the reported issue in the old version.

Regards,
Vinitha

AS Arvin Staff replied to Vinitha Jeyakumar May 30, 2022 04:45 PM UTC

Hi,


Thanks much! Please refer to the attached file for the required error-free version using 19.4.54.


Regards,

Arvin


Attachment: Kobe_alpha_19.4.54_2cd039a1.zip

VJ Vinitha Jeyakumar Syncfusion Team May 31, 2022 01:47 PM UTC

Currently, we are validating your reported query with high priority. we will update you the further details on or before 2nd June 2022.


VJ Vinitha Jeyakumar Syncfusion Team June 1, 2022 12:49 PM UTC

Hi Arvin,


We have considered the reported issue "Throwing console error when setting Enabled property as false in DateRangePicker" as a bug from our end and the fix for the issue will be included with our upcoming patch release on 21st June 2022.

You can now track the current status of the reported issue through the below link,
https://www.syncfusion.com/feedback/35345/throwing-console-error-when-setting-enabled-property-as-false-in-daterangepicker

Regards,
Vinitha

VJ Vinitha Jeyakumar Syncfusion Team June 23, 2022 08:06 AM UTC

Hi Arvin,


We have included the fix for the issue "Throwing console error when setting Enabled property as false in DateRangePicker" with our patch release version 20.1.61. So please upgrade your package to the latest to resolve the issue from your end.

Regards,
Vinitha

Marked as answer
Loader.
Up arrow icon