Laravel javascript require perfect-scrollbar - Stack Overflow

admin管理员组

文章数量:1305683

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 piled 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!

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 piled 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!

• javascript
• laravel
• laravel-mix
• perfect-scrollbar

Share Improve this question Follow edited Jul 21, 2018 at 14:41 Markus asked Jul 21, 2018 at 13:52 MarkusMarkus 2,06044 gold badges2929 silver badges6464 bronze badges 2

• Can you add the code that you're using to initialise it i.e. the $(...).perfectScrollbar code? – Rwd Commented Jul 21, 2018 at 14:17
• The content is added – Markus Commented Jul 21, 2018 at 14:41

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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 piling assets in laravel with bootstrap.js

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 perfectscrollbarStack Overflow