Dragula with react - Uncaught TypeError: react_dragula_1.default is not a function

Question

I am trying to test Dragula with react for drag and drop and finding issues. I am getting the error:

Uncaught TypeError: react_dragula_1.default is not a function

Anyone faced this issue or clue to solve the problem.

import * as React from "react";
import * as ReactDOM from 'react-dom';
import Dragula from 'react-dragula';

export class MultiPicklist extends React.Component {
    render() {
        return (<div className="swish-input-textarea">
                <div className='parent'>
                    <div className='wrapper'>
                        <div id='left-defaults' className='container' ref={this.dragulaDecorator} >
                            <div>Element 0</div>
                            <div>Element 1</div>
                            <div>Element 2</div>
                            <div>Element 3</div>
                        </div>
                        <div id='right-defaults' className='container'>
                            <div>Element a</div>
                            <div>Element b</div>
                            <div>Element c</div>
                            <div>Element d</div>
                            <div>Element e</div>
                        </div>
                    </div>
                </div>
                </div>);
    },
        dragulaDecorator = (componentBackingInstance) => {
            if (componentBackingInstance) {
                let options = { };
                console.log('componentBackingInstance');
                console.log(componentBackingInstance);
                Dragula([componentBackingInstance]);
             }
  };    

}

Answer 1

I see you are messing a bit with ES6 class syntax. Try to pull outside the class definition the ref callback:

import * as React from "react";
import * as ReactDOM from 'react-dom';
import Dragula from 'react-dragula';

export class MultiPicklist extends React.Component {
    render() {
        return (<div className="swish-input-textarea">
                <div className='parent'>
                    <div className='wrapper'>
                        <div id='left-defaults' className='container' ref={dragulaDecorator} >
                            <div>Element 0</div>
                            <div>Element 1</div>
                            <div>Element 2</div>
                            <div>Element 3</div>
                    </div>
                        <div id='right-defaults' className='container'>
                            <div>Element a</div>
                            <div>Element b</div>
                            <div>Element c</div>
                            <div>Element d</div>
                            <div>Element e</div>
                        </div>
                    </div>
                </div>
                </div>);
    }

}  
const dragulaDecorator = (componentBackingInstance) => {
        if (componentBackingInstance) {
            let options = { };
            console.log('componentBackingInstance');
            console.log(componentBackingInstance);
            Dragula([componentBackingInstance]);
         }
};

You can also use ES6 arrow functions in class methods, but for that you'd need to enable experimental features in Babel to get this to compile. Check this SO question for more details: https://stackoverflow.com/a/31362350/4642844