React/Redux/ReactDnd - Error: removeComponentAsRefFrom
<p>I am trying to apply a basic example of react DnD to my project (as a proof of concept) and am running into some issues. I am using this example - <a href="https://github.com/gaearon/react-dnd/tree/master/examples/02%20Drag%20Around/Naive" rel="nofollow">https://github.com/gaearon/react-dnd/tree/master/examples/02%20Drag%20Around/Naive</a> . which just let you drag around some divs inside a box. </p>

<p>So I have an outer component (Note: this is a few component levels up from the actual drag component) which is basically the whole page (this is just for testing a POC at first) which looks like so: </p>

<pre><code> import { DropTarget, DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';

const boxTarget = {
    drop(props, monitor, component) {
        const item = monitor.getItem();
        const delta = monitor.getDifferenceFromInitialOffset();
        const left = Math.round(item.left + delta.x);
        const top = Math.round(item.top + delta.y);

        component.moveBox(item.id, left, top);
    }
};

// eslint-disable-next-line new-cap
@DragDropContext(HTML5Backend)
// eslint-disable-next-line new-cap
@DropTarget('CLA_DRAG', boxTarget, (connect) =&gt; ({
    connectDropTarget: connect.dropTarget()
}))
export default class GenericPlatformComponent extends React.Component {
    ...

    render() {
        const { connectDropTarget } = this.props;

        return connectDropTarget(
            &lt;div&gt;
                {this.getBuilders()}
            &lt;/div&gt;
        );
    }
}
</code></pre>

<p>So pretty close to the examples container, just using a string for now instead of that constant in @<code>DropTarget</code> . The getBuilders just renders other components inside. <strong>I Ran this component before creating the DragSource component and everything was running fine</strong>. </p>

<p>So, a few components down I just added the react DnD syntax to the component I want to be draggable like so :</p>

<pre><code> import { DragSource } from 'react-dnd';

 const boxSource = {
    beginDrag(props) {
        const { id, left, top } = props;

        return { id, left, top };
    }
 };

// eslint-disable-next-line new-cap
@DragSource('CLA_DRAG', boxSource, (connect, monitor) =&gt; ({
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging()
}))
export default class SearchResult extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        const { connectDragSource } = this.props;

        return connectDragSource(
            &lt;div key={this.props.key}&gt;
                    &lt;Row&gt;
                        &lt;Col xs={2} sm={2} md={1} lg={1} &gt;
                            &lt;div style={tempThumbnail}&gt;
                                Picture Here
                            &lt;/div&gt;
                        &lt;/Col&gt;
                        &lt;Col xs={10} sm={10} md={11} lg={11} &gt;
                            &lt;DescriptionBlock result={this.props.result} {...this.props} /&gt;
                        &lt;/Col&gt;
                    &lt;/Row&gt;
            &lt;/div&gt;
        );
    }
}
</code></pre>

<p>So with all this, I am getting this error on the console (the app is stopping rendering too).</p>

<pre><code>bundle.js:29605 Uncaught (in promise) Error: removeComponentAsRefFrom(...): Only a ReactOwner can have refs. You might be removing a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: react-refs-must-have-owner).(…)
</code></pre>

<p>What is strange is the dragsource isn't even called onto the dom yet, so I have no idea where to start with this error. Any input or suggestions would be greatly appreciated. Thanks!</p>