Abdou FALL Abdou FALL - 2 months ago 43
React JSX Question

Reactjs: jQuery custom content scroller with reactjs

im tryin to integrate Jquery custom scrollbar plugin here in react. here is my code

import $ from "jquery";
import mCustomScrollbar from 'malihu-custom-scrollbar-plugin';
.....
componentDidMount: function() {
// fixed sidebar
var self = this;
mCustomScrollbar($);
$(ReactDom.findDOMNode(this.refs.menu_fixed)).mCustomScrollbar({
autoHideScrollbar: true,
theme: 'minimal',
mouseWheel:{ preventDefault: true }
});
self.forceUpdate();
},


i get this error index.jsx:51 Uncaught TypeError: (0 , _malihuCustomScrollbarPlugin2.default) is not a function

did somebody can help to make it work thanks

Answer

That’s not a React error. That’s based on your module loader (webpack, I’m guessing?) treating the jQuery plugin as if it were an ES2015 module. Try importing your plugin in the CommonJS style. In other words, replace:

import mCustomScrollbar from 'malihu-custom-scrollbar-plugin';

with:

var mCustomScrollbar = require('malihu-custom-scrollbar-plugin');

If that doesn’t work, you will need to share more info about your module loader and its configuration.

That said, as Toby mentioned, trying to combine jQuery plugins with React components is often unreliable and tricky, so proceed with caution.