Search code examples
jqueryreactjswebpackjsplumb

Using jsPlumb with Webpack React

I want to add jsPlumb to my webpack-build js-app(ReactJS). I'm using jsPlumb v2.0.7. When we bundle with webpack it was throwing error

Uncaught TypeError: jsPlumb.getRenderModes is not a function.

I was able to resolve the above issue by using imports and script loader, my webpack config loader looks like,

{
    test: require.resolve('jsplumb'),
    loaders: [
      'imports?this=>window',
      'script'
     ]
 }

Now, I'm unable to access any of the jsPlumb methods, it couldn't be resolved by webpack. I get an error when i use ready method of jsPlumb

Uncaught TypeError: _jsPlumb2.default.ready is not a function

__jsPlumb2.default is returning an empty object. Can someone let me know how to use jsPlumb with webpack ?

Solution

  • I have found a solution for the above mentioned issue, posting it here thinking that it might help someone else in future.

    I had used ES6 import statement,

    import jsPlumb from 'jsPlumb'

    Instead, if I use 

    import jsplumb from 'jsplumb'

    It resolved the problem and jsPlumb was available as global object since we used imports and script loader in webpack.