React-dnd: Add support for React 16.3 createRef type of ref

Created on 3 Apr 2018  ·  13Comments  ·  Source: react-dnd/react-dnd

Using connectDragSource with an element that is using the new createRef API (introduced in React 16.3.0) instead of callback refs causes the app to crash with the error: TypeError: previousRef is not a function.

https://github.com/facebook/react/pull/12162

enhancement

Most helpful comment

Same issue. Should I revert to using the old callback ref, or is there a way to work around this?

All 13 comments

This is what browser outputs:

    return (0, _react.cloneElement)(element, {
        ref: function ref(node) {
            newRef(node);

            if (previousRef) {
                previousRef(node); // << fails with new refs
            }
        }
    });

Same issue. First time I finally get a chance to use the new refs and react-dnd is in the way.

Long term I'm not sure about the whole react-dnd model of using findDOMNode and replacing the ref. When React has new createRef and withRef. New forwardRef API. And a number of APIs are starting to make use of render props.

But for now it should be sufficient to check if previousRef is an object with a current property and set that instead of calling it as a function.

Anyone have any solutions for this, while still using createRef()?

I can dig into this later, but a sandbox demonstrating what you're looking for would be great here.

I'm facing the same issue as well.
@darthtrevino https://codesandbox.io/s/733onvqwl6 maybe this sandbox helps.

Same issue. Should I revert to using the old callback ref, or is there a way to work around this?

+1
using React.createRef() and ref.current crashed the app.

When this will be fixed?

Still not fixed :/

I'll make some time after react-conf to look into this

I was able to use a workaround as suggested by encapsulating the ref div inside another blank div.
example:

 <div>
        <div
          style={{
            position: "relative",
            borderStyle: "dashed",
            width: 300,
            height: 200,
            position: "relative"
          }}
          ref={this.myRef}
        />
      </div>

👍 any update on this @darthtrevino. would be great to hear an update

@darthtrevino Encountered same issue, could we get any ETA on the fix?

should be today I think. Let me know if there are any issues with the release I cut later

Was this page helpful?
0 / 5 - 0 ratings