JQuery timepicker import issue

Question

I am trying to use JQuery timepicker control (https://timepicker.co/) as an npm package

After installing it using "npm i jquery-timepicker"

I tried to import it to js page as shown below

import { TimePicker } from 'jquery-timepicker';

However I am getting error as shown in the following pictures when I execute the npm run build command

But I can see that, "jquery-timepicker" folder is created in the node_modules folder and Package.json file is updated as well

"jquery-timepicker": "^1.3.3",

My doubt is whether I am importing it correctly or not.

There are other libraries in the same project I use without a issue(i.e. DateRangePicker)

I'm having the same issue. Can't figure out how to install it correctly. I installed jQuery correctly and have it working. But I get the error 'jquery__WEBPACK_IMPORTED_MODULE_6___default(...)(...).timepicker is not a function' when I try to use timepicker. — Joshua Dance, Oct 24 '22 at 16:51
Figured it out after a couple of hours. Posted an answer below - https://stackoverflow.com/a/74185895/1296746 — Joshua Dance, Oct 24 '22 at 19:28

score 0 · Answer 1 · answered Aug 17 '21 at 12:54

0

This is likely an issue with the project setup. As you can see from the error messages, npm is struggling to find the module within the node_modules directory.

When you install the npm library you will get a directory called node_modules. The structure will look something like this... File structure

If you are not using node for your project, you can also include the library using a CDN, documented here under the heading cdnjs -> https://timepicker.co/

answered Aug 17 '21 at 12:54

fatchild

56
5

yes CDN and Downloading library and adding it manually are options but in this project we need to use npm. – Chathuranga Ranasinghe Aug 17 '21 at 12:57
Ok. Have you run npm init in the root of the project? Also, is node_modules not created when you run npm i jquery-timepicker? – fatchild Aug 17 '21 at 13:13
"jquery-timepicker" folder is created in the node_modules folder and Package.json file is updated as well – Chathuranga Ranasinghe Aug 17 '21 at 13:18
That all sounds correct then. Presuming you are using meeting.js as a linked js file for the projects jQuery why not try use the suggested way of including the module. – fatchild Aug 17 '21 at 14:15
you mean CDN or download? – Chathuranga Ranasinghe Aug 17 '21 at 16:54
Download, or CDN – fatchild Aug 17 '21 at 20:13

score 0 · Answer 2 · answered Oct 24 '22 at 19:27

I just figured out this issue in my project.

I did a full write up here. https://stackoverflow.com/a/74185848/1296746

Short answer to install timepicker.co using npm and webpack:

In your main js file import the jquery.timepicker js file and css file.

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

Make sure you have webpack css-loader and style-loader installed. https://github.com/webpack-contrib/css-loader

Make sure you set jQuery as a global variable in your webpack config file, as this article shows you - https://codingtrium.com/how-to-configure-and-use-jquery-with-webpack/

There are a few more steps so look at my full answer if you have issue.

JQuery timepicker import issue

2 Answers2