Fails in production mode

In development environment my dnd component works excellent. But in production it doesn’t. Multiple Uncaught Error: Expected sourceIds to be an array. message in console on drag begin. How is it possible?

[jdconner]

Found out a decent solution. Props to @tambeta for the initial code here

If we take his implementation as is, itll destroy performance if the user hovers the DropTarget since the DropTarget will consistently be forced to rerender. Given our situation, we only want to know if the targets have changed, so we can update his solution to:

import React from 'react';
import { DropTarget } from 'react-dnd';
import pick from 'lodash-es/pick';
import isEqual from 'lodash-es/isEqual';

function RapidFireDropTarget(types, spec, collect, options = {}) {
    let collectProps = {};
    const prevHover = spec.hover;
    const { collectRapidly = [] } = options;
    let lastTargetIds = [];

    const dummyConnect = {
        dropTarget: () => () => {
            throw new Error('Rapidly collected props cannot include results from `connect`');
        },
    };

    const WrappedComponent = Component => 
        class extends React.Component {
            render() {
                return <Component {...this.props} {...collectProps} />;
            }
        };

    spec.hover = (props, monitor, component) => {
        const allCollectProps = collect(dummyConnect, monitor);
        const nextTargetIds = monitor.internalMonitor.store.getState().dragOperation.targetIds;

        collectProps = pick(allCollectProps, collectRapidly);

        if (!isEqual(nextTargetIds, lastTargetIds)) {
            component.forceUpdate();
        }

        lastTargetIds = monitor.internalMonitor.store.getState().dragOperation.targetIds;

        if (prevHover instanceof Function) {
            prevHover(props, monitor, component);
        }
    };

    return Component => DropTarget(types, spec, collect, options)(WrappedComponent(Component));
}

export default RapidFireDropTarget;

then use it:

...

export default RapidFireDropTarget(types, target, collect)(YourComponent);

and it should technically only force a rerender if the targets change.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.