34Uncaught (in promise) TypeError: moment is not a function(…)

[ItsMrAkhil]

.
.
.
.
.
.
.
}(this, function(moment, $) {
    var DateRangePicker = function(element, options, cb) {

        //default settings for options
        this.parentEl = 'body';
        this.element = $(element);
        this.startDate = moment().startOf('day');
.
.
.
.

[skratchdot]

Can you past a link to your code? It seems like you aren't passing moment and $ to the function?

[minusplusminus]

Same problem here. moment() isn't a function moment.default() is

[alikhani]

I'm having the same issue. Any timeline for when this could get fixed?

[stuneak]

@skratchdot I'm having the same issue, how to fix it?

[paknefia]

I'm having the same issue. And solved by calling moment.min.js file before daterangepicker.js in the end of html body.

[ghost]

Same issue here. I made sure that I include moment.js dependency before react-bootstrap-daterangepicker one. I am using webpack for building the app, and getting the same error as posted. All of my other moment.js applications are working as expected.

[WebKieth]

Same. Try to init daterange into my Vue component. Problem starts from migration (browserify to webpack) on browserify + vueify moment works fine

[ciolansteen]

Not sure this isn't yet fixed but - Load moment.min.js before daterangepicker.js

[chrislabarge]

Not sure this isn't yet fixed but - Load moment.min.js before daterangepicker.js

Thanks @ciolansteen ^^ this solved it for me!

[krishna-kb]

I faced the same issue and I use webpack in my project. Little bit of digging into bootstrap-datepicker code helped me solve this.
I made some changes to my webpack config to bypass this issue,

Add this to 'modules' in webpack config, where all the rules are
This bypasses the define check which is in daterangepicker.js file.

rules: [
      {
        test: require.resolve('path_to_node_modules/bootstrap-daterangepicker/daterangepicker.js'),
        use: 'imports-loader?define=>false',
      },
]

Now we need to expose our moment.js module on window to bypass the ternary condition and avoid getting the moment module from require.js

new webpack.ProvidePlugin({
      'window.moment': ['moment', 'default'],
    }),

PS:
I decided to solve this purely using webpack as there are other components in my repo which use moment.js, so I didn't want to include moment in my index.html as I want it to be lazy loaded.
This should solve the issue a little bit cleanly, which avoids unnecessary importing moment via script tag.

[erisriso]

Not sure this isn't yet fixed but - Load moment.min.js before daterangepicker.js

that solved my problem

[skratchdot]

closing this due to inactivity. please re-open if this is still an issue in v6.0.0 or greater

[monodeep88]

I'm having the same issue. And solved by calling moment.min.js file before daterangepicker.js in the end of html body.

yes as there are moment() func in daterangepicker.js file..so we need to call the moment.min.js file before daterangepicker.js.

[manojKonda01]

closing this due to inactivity. please re-open if this is still an issue in v6.0.0 or greater

@skratchdot am facing this same issue.
Iam using
"bootstrap-daterangepicker": "^3.1.0",
"jquery": "^3.6.4",
"moment": "^2.29.4",
"numeral": "^2.0.6",
"react": "^18.2.0",
"react-bootstrap-daterangepicker": "^8.0.0",

[hassamulhaq]

Laravel: v11,
Vite: v5.0

How to fix 'Uncaught (in promise) TypeError: moment is not a function with datarangepicker plugin'

npm install jquery
npm install daterangepicker
npm install moment

add below code in app.js

app.js path --> /resources/js/app.js

import $ from "jquery";
window.jQuery = window.$ = $;

import * as moment from 'moment';

import 'daterangepicker';

in resources/css/app.css

@import 'daterangepicker/daterangepicker.css';

vite config file

vite.config.js --> vite.config.js check resolve: {...

import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';

import path from 'path';

export default defineConfig({
    server: {
        watch: {
            usePolling: true,
            ignored: [
                '**/node_modules/**',
                '**/vendor/**',
            ],
        },
    },
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
            '$': 'jQuery',
            'moment': path.resolve(__dirname, 'node_modules/moment/moment'),
        }
    }
});

How to use.

type="module" is important
index.blade.php

<script type="module">
const initializeDateRangePicker = () => {
$('#monthly-date-range').daterangepicker({
    opens: 'center',
    locale: {
        format: 'YYYY-MM-DD'
    },
    startDate: ---,
    endDate: ---
});
initializeDateRangePicker();
</script>