CODEWITHSUNDEEP
javascriptreactjswebpackdragula
takethefake
takethefake

Reputation: 805

React NPM package(Dragula) works in development but not in production

I've built a nice drag'n Drop with React 15 and Dragula 3.7.2 but when i bundle my Application for Production the whole dnd thing doesn't work except i'm able to lift up a single Element but can't find a container to drop it in.

I'm assigning my containers with a reference to my drake instance which i currently create in componentDidMount.

I've assigned multiple EventListener to the drake instance, but the only one which is firing is the 'drag'-eventListener. I console.logged the drake instance in there and saw all my relevant containers correctly assigned

I've also thought that there could be a minification failure with the dragula bundle and so i used the version from the cdn

class ProcessGridDrag extends React.Component {
  constructor() {
    super();
    this.dragContext = null;
    this.dragContainers = [];
  }

  componentDidMount() {
    // eslint-disable-next-line no-undef
    this.drake = dragula(this.dragContainers, options);
    console.log('didMount');
    console.log(this.drake.containers);
    this.drake.on('drop', this.onDropTile);
    this.drake.on('out', this.onOutContainer);
    this.drake.on('over', console.log);
    this.drake.on('drag', () => {
      debugger;
      console.log(this.drake);
    });
    this.drake.on('shadow', console.log);
    // Override for touchmove for correct behaviour on iPad
    window.addEventListener('touchmove', () => {});
  }

  componentWillUnmount() {
    this.dragContainers = [];
    console.log('will Unmount');
    this.drake.containers = [];
    this.drake.off('drop', this.onDropTile);
    this.drake.off('out', this.onOutContainer);
    this.dragContext = null;
    this.drake.destroy();
  }
  
  // This one is passed down to components which should act as a drag container
  dragulaDecorator = componentBackingInstance => {
    if (
      componentBackingInstance &&
      this.dragContainers.indexOf(componentBackingInstance) === -1
    ) {
      this.dragContainers.push(componentBackingInstance);
    }
  };

webpack.config.prod: https://pastebin.com/BLu2hmmv webpack.config.dev: https://pastebin.com/3wczNisj

Upvotes: 1

Views: 172

Answers (1)

takethefake
takethefake

Reputation: 805

I had a Problem with my css. I've overwritten the top-value of the dragged element.

Because of a different LoadOrder in Production this problem only occured there

Upvotes: 1

Related Questions