Using jsPlumb with Webpack React

Question

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 ?

Aleem S · Accepted Answer · 2016-06-10 05:07:32Z

2

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.

answered Jun 10, 2016 at 5:07

Aleem S

1511 silver badge18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lex Soft · Accepted Answer · 2020-02-10 02:34:48Z

Each of the following ways works for me:

import jsPlumb from "jsPlumb"

import jsPlumb from "jsplumb/dist/js/jsplumb"

import jsPlumb from "jsplumb/dist/js/jsplumb.min"

However, before accessing its methods/properties, we should take a look at what jsPlumb consists of. When asserting console.log("jsPlumb :", jsPlumb) statement, we can see that jsPlumb consists of several properties; one of them is jsPlumb itself. So, in order to access its methods/properties, we have to write like so :

jsPlumb.jsPlumb.someMethods

If we want a short syntax, we can set jsPlumb variable like so :

jsPlumb = jsPlumb.jsPlumb

Hence, we can use normal syntax to access its methods/properties :

jsPlumb.ready(function () {..})
jsPlumb.getInstance()

Alexey Victorov · Accepted Answer · 2021-07-29 06:58:00Z

0

In ES6 you should use the following import statement to use a syntax as documented

import { jsPlumb } from 'jsplumb';

answered Jul 29, 2021 at 6:58

Alexey Victorov

4332 silver badges10 bronze badges

Collectives™ on Stack Overflow

Using jsPlumb with Webpack React

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related