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
2
Answers
To help rookies like me, I used @acdcjunior's answer as the key but I had to do a bunch of stuff to get this to work.
So here is how to use https://timepicker.co/ using npm and webpack.
Step 1. Install timepicker using npm:
npm i jquery-timepicker
Step 2. Since timepicker requires jquery, install jquery using npm:
npm i jquery
Step 3. You need the javascript and css on the page you want to use it on. So use webpack to import both.
Step 4. Webpack will complain because it doesn't know how to handle css out of the box. So you need to install css-loader and style-loader (the documentation doesn't explicitly state this.
Step 5. To complete the installation tell webpack how to use those two loaders. Add to your
webpack.config.js
file, making sure to get the order in the[]
array correct:Step 6: The CSS will now load nicely, but you will get the error
jquery__WEBPACK_IMPORTED_MODULE_6___default(...)(...).timepicker is not a function
until you tell webpack to provide jQuery as a plugin which will make it available globally. This article showed me how to do that, so we add to yourwebpack.config.js
file:Step 7: This will throw an error saying webpack is undefined. Which is crazy because this is a webpack config file. But the
new.webpack
is not recognized so we have to tell webpack, what webpack is. So at the top of our webpack file we add:So now we have jQuery installed and jQuery is a global variable. We have the jquery timepicker installed and imported into our main js file. We have the jquery timepicker css installed and importing into our main js file and recognized by webpack.
Now it works. Now we can rest.
I believe you are facing this issue because the
jquery-timepicker
doesn’t have anindex.js
file. Source: https://unpkg.com/browse/[email protected]/Try:
This should automatically setup the plugin.