How to properly import flatpickr on laravel mix

I want use daterange picker from flatpickr library on laravel but when i try to initiate it i got an error if self.config.plugins[i] is not a function. I have follow the instruction but still not find the solution.

Here my code to reproduce:

package.json file:

{
    .....
    .....
    "dependencies": {
        .....
        .....
        "flatpickr": "^4.6.3",
        .....
        .....
    }
}

bootstrap.js

require('flatpickr');

const $daterangePicker = $('[data-plugins="daterange-picker"]');

if ($daterangePicker.length > 0) {
  $daterangePicker.flatpickr({
    mode: 'range',
  });
}

Blade view:

<div class="form-group mr-2">
 <input type="text" class="form-control form-control-sm"
        data-plugins="daterange-picker" placeholder="2018-10-03 to 2018-10-10">
</div> <!-- end form-group mr-2 -->

Console log errors:

TypeError: self.config.plugins[i] is not a function
    at parseConfig (flatpickr.js:1977)
    at init (flatpickr.js:588)
    at FlatpickrInstance (flatpickr.js:2522)
    at _flatpickr (flatpickr.js:2541)
    at jQuery.fn.init.jQuery.fn.flatpickr (flatpickr.js:2592)
    at HTMLDocument.<anonymous> (kuhaku.js:22)
    at mightThrow (jquery.js:3762)
    at process (jquery.js:3830)

Solution

It's your data-plugins attribute. Change the name of it to almost anything else and it'll work fine.

In your bootstrap:

const $daterangePicker = $('[data-type="daterange-picker"]');

    if ($daterangePicker.length > 0) {
        $daterangePicker.flatpickr({
            mode: 'range',
        });
    }

In your blade template:

<div class="form-group mr-2">
            <input type="text" class="form-control form-control-sm"
                   data-type="daterange-picker" placeholder="2018-10-03 to 2018-10-10">
        </div> <!-- end form-group mr-2 -->