Tempus-dominus: Problem with webpack

Created on 14 Sep 2015 · 13Comments · Source: Eonasdan/tempus-dominus

I try =>
import BootstrapDateTimePicker from "eonasdan-bootstrap-datetimepicker"; and console.log(BootstrapDateTimePicker);
And console.log return me empty object.

I try =>
import from "eonasdan-bootstrap-datetimepicker";
But i have Uncaught TypeError: $(".picker").datetimepicker is not a function

Please add module.exports = $.fn.datetimepicker;
to 2551 line

Source

Dodelkin

Most helpful comment

@aburkut Thank you. I've been pulling my hair out for about 24 hours and that little alias fixes everything. My webpack.config.js:

var path = require('path');

module.exports = {
    resolve: {
        alias: {
            // Force all modules to use the same jquery version.
            'jquery': path.join(__dirname, 'node_modules/jquery/src/jquery')
        }
    }
};

kebian on 30 Sep 2016

👍7 ❤3

All 13 comments

I have no idea what you're talking about.

Eonasdan on 14 Sep 2015

Hi, look, I met the same problem. That's what he tried to say.

He tried to import your plugin via require, but he gets empty object, when he did.

So he asks you to add module.exports

Regards!

alxrm on 15 Sep 2015

I don't know anything about require or webpacks. You're welcome to put in a pull request

Eonasdan on 15 Sep 2015

Well, I did pull-request which solves this problem. Hope you'll accept it ASAP.
Thanks in advance!

alxrm on 15 Sep 2015

@alxrm Could you link to the PR or state if it is already merged?

JanMalte on 14 Mar 2016

@JanMalte https://github.com/Eonasdan/bootstrap-datetimepicker/pull/1322

alxrm on 14 Mar 2016

@alxrm Thanks. It looks like it wasn't merged but rejected.
Did you get this date picker to properly working with webpack?

JanMalte on 15 Mar 2016

I ran into the same problem, and managed to solve/(hack around) it as follow:

Create a new folder in the same folder as your node_modules, but call it custom_modules
Inside the custom_modules folder, add a new folder eonasdan-bootstrap-datetimepicker
Move the following files into custom_modules/eonasdan-bootstrap-datetimepicker

node_modules/eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js
node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css

uninstall the eonasdan-bootstrap-datetimepicker project from node_modules
In your webpack config, add the following:

Under plugins, add:

  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'windows.jQuery': 'jquery'
  })

Under resolve, add:

    modulesDirectories: ['custom_modules', 'node_modules'],
    alias: {
      'datetimepicker': 'eonasdan-bootstrap-datetimepicker/bootstrap-datetimepicker.js'
    }

In the component you're using the datepicker, add the following at your imports:

import 'datetimepicker';
import 'style!css!eonasdan-bootstrap-datetimepicker/bootstrap-datetimepicker.css';

You should now be able to call the datetimepicker() on a jQuery object.

prijkes on 28 Mar 2016

👍4

I ran into the same problem too. Datetimepicker tries to load its own jQuery.
So the solution is very simple:

resolve: {
    alias: {
        'jquery': path.join(__dirname, 'node_modules/jquery/dist/jquery'),
    }
}

aburkut on 11 Apr 2016

👍7 ❤3

@aburkut Thank you. I've been pulling my hair out for about 24 hours and that little alias fixes everything. My webpack.config.js:

var path = require('path');

module.exports = {
    resolve: {
        alias: {
            // Force all modules to use the same jquery version.
            'jquery': path.join(__dirname, 'node_modules/jquery/src/jquery')
        }
    }
};

kebian on 30 Sep 2016

👍7 ❤3

Man, I've been looking for this solution for the past few hours. None of the plugins (datetimepicker, popover, tooltips) wanted to work and I always got a Uncaught TypeError: $(…).datetimepicker is not a function-like error. Had to be Webpack messing things up.

THANK YOU @aburkut