Trying to use timepicker.co, get the error 'timepicker is not a function'

Question

Trying to use https://timepicker.co/ using npm and webpack.

I installed jQuery with the npm command npm i jquery and then imported it in my main js file with:

import $ from 'jquery';

This works well, and I can use jQuery.

Next following the instructions I installed timepicker with the npm command npm i jquery-timepicker

This added timepicker to the package.json file:

  "dependencies": {
    "googleapis": "^108.0.0",
    "jquery": "^3.6.1",
    "jquery-timepicker": "^1.3.3"
  },

webpack build this just fine. However, when the page loads, and I run the command to initiate my input field,

$('input.timepicker').timepicker({});

I get this error in the console:

Uncaught TypeError: jquery__WEBPACK_IMPORTED_MODULE_6___default(...)(...).timepicker is not a function

Reading the documentation, is says

To use jQuery Timepicker you'll need to include two files: jquery.timepicker.min.js and jquery.timepicker.min.css

I am a rookie using npm, I would assume I would import the js file using something like:

import timepicker from 'jquery-timepicker';

But that throws a webpack error.

I feel like I am missing something simple. How can I include those 2 required files using webpack and npm?

Update 1: Tried importing the css and js in my main index.js file

import 'jquery-timepicker/jquery.timepicker.css';
import 'jquery-timepicker/jquery.timepicker';

Still get the error: Uncaught TypeError: jquery__WEBPACK_IMPORTED_MODULE_6___default(...)(...).timepicker is not a function

Answer 1

I believe you are facing this issue because the jquery-timepicker doesn't have an index.js file. Source: https://unpkg.com/browse/[email protected]/

Try:

import 'jquery-timepicker/jquery.timepicker.css';
import 'jquery-timepicker/jquery.timepicker';

This should automatically setup the plugin.