Using daterangepicker with laravel 10 + vite

Question

I'm trying to create a daterange picker, using nom packages daterangepicker or bootstrap-daterangepicker, laravel 10 and vite.

Here is the content of my app.js

import './bootstrap';

import $ from 'jquery';
window.$ = $;

import highcharts from 'highcharts';
import highchartsmore from 'highcharts/highcharts-more';
import highchartsacessibility from 'highcharts/modules/accessibility';
highchartsmore(highcharts);
highchartsacessibility(highcharts);
window.Highcharts = highcharts;

import moment from 'moment';
window.moment = moment;

import daterangepicker from 'daterangepicker';
window.daterangepicker = daterangepicker;

DateRangePicker is imported, so is moment, yet I get the error "moment is not a function" when trying to create the date range picker field :

    <div class="form-group">
        <label for="dates" >Période</label>

        <input id="dates" type="text" class="form-control" />
        <script type="module">$('#dates').daterangepicker();</script>
    </div>

I tried multiple changes in app.js, to no avail.

Any ideas ?

Thanks

Answer 1

You can add an alias into your vite.config.js like follow :

resolve: {
    alias: {
        'moment': path.resolve(__dirname, 'node_modules/moment/moment.js'),
    },
},

Source : https://github.com/dangrossman/daterangepicker/pull/2307#issuecomment-1489555129