Laravel javascript require perfect-scrollbar

Question

I try to require the jquery pulgin perfect-scrollbar to my laravel javascript. So I have runed

npm install perfect-scrollbar

In Line 1 of my Javascript file (located under ressources/assets/javascript/material-dashboard/myfile.js) I require the plugin with this attempt

require('perfect-scrollbar');

The myscript.js is required to the app.js with require('./material-dashboard/myscript.js')

Now the browser console tell me

Uncaught TypeError: $(...).perfectScrollbar is not a function

The assets are compiled with

npm run dev

The content of myscript.js

require('perfect-scrollbar');

(function() {
  isWindows = navigator.platform.indexOf('Win') > -1 ? true : false;

  if (isWindows) {
    // if we are on windows OS we activate the perfectScrollbar function
    $('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar();

    $('html').addClass('perfect-scrollbar-on');
  } else {
    $('html').addClass('perfect-scrollbar-off');
  }
})();

What is wrong?

Thanks for your help!

Can you add the code that you're using to initialise it i.e. the `$(...).perfectScrollbar` code? — Rwd, Jul 21 '18 at 14:17

score 7 · Answer 1 · answered Aug 24 '18 at 18:12

Just to simplify your job, under bootstrap.js file that handles require('perfect-scrollbar'); simply change it to window.PerfectScrollbar = require('perfect-scrollbar').default; and you will be good to go. Only answers questions if using compiling assets in laravel with bootstrap.js

Rwd · Accepted Answer · 2018-07-21T23:22:57.157

As per the docs, to initialise an element with the plugin you should do something like the following:

import PerfectScrollbar from 'perfect-scrollbar';

new PerfectScrollbar(".sidebar .sidebar-wrapper");
new PerfectScrollbar(".main-panel");

If you want to use require instead of import you would do something like:

let PerfectScrollbar = require('perfect-scrollbar').default;

Lastly, it doesn't look like the plugin is meant to work with jQuery out of the box, however, if you want to use with jQuery like you are in your post you could do the following:

import PerfectScrollbar from 'perfect-scrollbar';

$.fn.perfectScrollbar = function (options) {

    return this.each((k, elm) => new PerfectScrollbar(elm, options || {}));
};

$('.sidebar .sidebar-wrapper, .main-panel').perfectScrollbar();

Laravel javascript require perfect-scrollbar

2 Answers2