Proper way to include 3rd daterangerpicker library in custom component

Need Help
#1

Hey everyone,

I’m hoping someone can point me in the right direction on how I would go about including a 3rd party npm library into a custom component. Using the daterangerpicker library for example:

1 - npm i daterangepicker ← Installs fine
2 - I am including it in my plugin/components/FilterTransactions.php as so:

public function onRun(){
$this->filterTransactions();
$this->addJs(‘/node_modules/daterangepicker/moment.min.js’);
$this->addJs(‘/node_modules/daterangepicker/daterangepicker.js’);
$this->addCss(‘/node_modules/daterangepicker/daterangepicker.css’);
$this->addJs(‘/plugins/ryansandnes/complex/components/filtertransactions/assets/js/filtertransactions.js’);
}

Is this accurate to include it in this way, or is there somewhere else I should be doing a @import? Usually these libraries don’t require me to include separate libraries on top of them. In this case I needed to include daterangepicker/moment.min.js as well so I just want to make sure I’m not about to develop a terrible habbit!

Thanks!

#2

Hey @theshado40

Referencing node_modules will be problematic since those files are technically not published. Consider installing Laravel Mix which has a copy() function to publish files from the directory. For example

mix.copy(
  'node_modules/vue/dist/vue.min.js',
  'modules/system/assets/vendor/vue/vue.min.js'
);

Then copy it to your plugin’s asset directory.