React-DnD Meteor integration help

react
1

Hi all,

We’ve been refactoring our little web app to use React Components and we’ve had some success integrating other react components such as React AutoSuggest

Our recent attempt at working with React-DnD has not been as fruitful. There’s some disconnect between when the component’s props are being bound and when it’s rendered.

This gist shows what we did. Just seeing if anyone has messed with this before and can point us in the right direction.

Thanks!

2

Hi, first, I suggest you remove this lines. If you interested, I can show you my components

3

I would love to see what you’ve come up with. I’ve removed those lines before and it hasn’t resolved my issue. Incidentally, the connectDragSource in the render also produces an error from Tracker recompute function.

Exception from Tracker recompute function:
debug.js:41 TypeError: connectDragSource is not a function

Thanks for your help!

4

here. I’m also using autosuggest in this components). I hope you’ll find something useful there.

BTW, this was great example for me…

5

Thanks for your help. I’ll report back once I get a working solution together.

6

As it turned out… I was attempting to utilize the ES5 documentation for React-DND with require but it didn’t work properly with Meteor. I ended up researching a few solutions to move to a ES6 module supporting method and decided to go with webpack:webpack

I’ve updated the same gist to show the before and after.

Don’t have a drop context yet but I can confirm that it is indeed dragging and not throwing errors =D

Thanks again for your help @sohaam

7

Hi @grokbot, I was having the same issue with the connectDragSource not being a function, and it turned out that the solution was rather simple. Instead of having:

DragSource(ItemTypes.CARD, cardSource, collect)(Card);

I should’ve had:

Card = DragSource(ItemTypes.CARD, cardSource, collect)(Card);

I found the answer within this (unrelated) discussion :slightly_smiling: Desperately waiting Redux example.