Use 3rd party jQuery files in custom module Magento 2

Question

Trying to use slick slider in my custom module

All css is loaded by /var/www/html/magento2/app/code/CompanyName/ReviewRating/view/frontend/layout/reviewrating_index_index.xml

I am In Developer Mode.

I followed Magento2 adding 3rd party jQuery files to module

1) In /var/www/html/magento2/app/code/CompanyName/ReviewRating/view/frontend/templates/reviewrating_index_index.phtml

<section class="vertical-center slider">
 <div>
 <div class="dummy-content"> I am a Text </div>
 </div>
 <div>
 <div class="dummy-content"> I am a Text </div>
 </div>
</section>
<script type="text/x-magento-init">
{
 ".vertical-center" : {
 "customjs" : {
 "autoplaySpeed": 5000
 }
 }
}
</script>

2) In /var/www/html/magento2/app/code/CompanyName/ReviewRating/view/frontend/requirejs-config.js

var config = {
 map: {
 '*': {
 customjs: 'CompanyName_ReviewRating/js/customjs',
 }
 },
 paths:{
 "slick": "js/slick/slick"
 },
 shim:{
 'slick':{
 'deps':['jquery']
 }
 }
};
console.log('This is printed');

3) In /var/www/html/magento2/app/code/CompanyName/ReviewRating/view/frontend/web/js/slick/ Below files are present in this location

 -> slick.js 
 ->slick.css
 ->slick-theme.css 

Issue: js file is not loaded

In console GET http://localhost/magento2/pub/static/frontend/Magento/luma/en_US/js/slick/slick.js net::ERR_ABORTED

Answer 1

It's hard to say without seeing all of your code in action but here are a few suggestions I can think of that might help:

Requirejs-config.js Formatting

In /var/www/html/magento2/app/code/CompanyName/ReviewRating/view/frontend/requirejs-config.js:

• Remove the comma after the customjs: 'CompanyName_ReviewRating/js/customjs' line. Javscript (JSON) doesn't allow trailing commas on arrays the same way PHP does.

Clear Cache, Static Content, and Run Static Content Deploy

From your Magento root:

rm -rf var/cache/* var/view_preprocessed/* var/page_cache/*
rm -rf pub/static/*
php bin/magento setup:static-content:deploy