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

CodePudding user response：

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.

CodePudding user response：

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.

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

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.

npm install --save-dev css-loader
npm install --save-dev style-loader

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:

module: {
        rules: [
            {
                test: /\.css$/i,
                // order is load css first, then put that on the page using style loader. 
                // But they load in reverse order so the order in the array is important. 
                use: ["style-loader", "css-loader"], 
                
            },
        ],
    },

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 your webpack.config.js file:

plugins: [
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: "jquery"
    })     
],

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:

const webpack = require('webpack');

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.