Error in mounted hook: "TypeError: Cannot read property 'insertBefore' of null"

Hello,

I’m encountering one error that I’m not sure if you’ve seen before. In my app, I have a dropdown that uses the option to render the date picker or the date range picker. If the option selected from the dropdown is requiring as input only one date, then I render the date picker. If the option selected from the dropdown requires two dates for a date range, I render the date range picker.

The error I encounter is when I switch from date picker to date range picker is "Error in mounted hook: "TypeError: Cannot read property 'insertBefore' of null"".

The error comes from the DateRangePickerComponent, and it has mentions of the error at:
  • Object.createInput
  • DateRangePicker.createInput
  • DateRangePicker.initialize
  • DateRangePicker.render
  • DateRangePicker.Component.appendTo
  • VueComponent.ComponentBase.mounted
This is the code block that determines which date picker to render based on value type:
Date: {
default: {
is: 'DatePickerComponent',
placeholder: 'Enter date',
cssClass: 'date-picker-component'
},
range: {
is: 'DateRangePickerComponent',
placeholder: 'Enter date range',
cssClass: 'date-picker-component'
}

1 Reply

BC Berly Christopher Syncfusion Team April 23, 2020 11:03 AM UTC

Hi Ian, 
  
Greetings from Syncfusion support.  
  
We have confirmed the reported issue “While render the DatePicker component dynamically using v-if, console error is produced in Vue platform” as a bug at our end and this fix will be included in our Volume 1 SP 1 release which is expected to be rolled out on mid of May 2020. We appreciate your patience until then.  
  
You can track the status of the reported issue from the below feedback. 
  
Regards, 
Berly B.C 


Loader.
Up arrow icon