using jquery plugins that are not part of JQuery UI in laravel

Question

I am trying to use a jquery plugin (jQuery Timepicker) see the following link for its documentation 👉 timepicker ! I installed it using npm. I like to work offline that is why I am skeptical about using cdns. The problem is that when I initialize it,

            $(document).ready(function(){
                $('.timepicker').timepicker({});
            });


    </script>

i get an error: jQuery.Deferred exception: $(...).timepicker is not a function

i have been working with JQuery UI datepicker which works just fine. I however had to import it in // resources/assets/js/app.js

    import $ from 'jquery';
    window.$ = window.jQuery = $;

    import 'jquery-ui/ui/widgets/datepicker.js';

i tried importing timepicker as a widget too

     import 'jquery-ui/ui/widgets/timepicker.js';

but I get an error when I run 'npm run dev'

    ERROR in ./resources/js/app.js
    Module not found: Error: Can't resolve 'jquery-ui/ui/widgets/timepicker.js' in 'C:\xampp\htdocs\DoMyHomework\resources\js'
     @ ./resources/js/app.js 34:0-44
     @ multi ./resources/js/app.js ./resources/sass/app.scss

window.$ = window.jQuery = $;

import 'jquery-ui/ui/widgets/datepicker.js';
import 'jquery-ui/ui/widgets/timepicker.js';

// resources/assets/js/app.js
$('.datepicker').datepicker();
$('input.timepicker').timepicker();

        ERROR in ./resources/js/app.js
        Module not found: Error: Can't resolve 'jquery-ui/ui/widgets/timepicker.js' in 'C:\xampp\htdocs\DoMyHomework\resources\js'
         @ ./resources/js/app.js 34:0-44
         @ multi ./resources/js/app.js ./resources/sass/app.scss

How do I work with JQuery plugins such as this. Assistance will be highly appreciated.

Answer 1

For my case, I was using npm to install the packages. In order to use the dependencies, require the dependency from resources/js/bootstrap.js

as follows;

window.Dependency = require('dependencyYouWant');