Using browserify with react-dnd about react-dnd HOT 18 CLOSED

Can you post a complete project somewhere so I could take a look?
It works fine with Webpack so in theory there should be no problem with Browserify either..

from react-dnd.

I have had issues with Browserify + react-dnd today as well, not sure if this is the same issue. I am using browserify + reactify to transform my JSX. I read your note about using ES6 features, so i added {harmony: true} to the reactify options to use the es6/harmony transpiler. However, it appears that browserify/reactify only perform this transform on my code and not the module dependencies i'm requiring - so even with {harmony: true} the ES6 is not compiled and I get a syntax error from react-dnd using ES6 syntax.

I'll try to throw together a minimum test case tonight if that's not helpful. Thanks!

from react-dnd.

BTW I should note FWIW - I've been able to work around this problem for the moment by requiring the minified dist file directly, ie. { DragDropMixin } = require('../../../node_modules/react-dnd/dist/ReactDND.min.js') rather than { DragDropMixin } = require('react-dnd')

from react-dnd.

However, it appears that browserify/reactify only perform this transform on my code and not the module dependencies i'm requiring - so even with {harmony: true} the ES6 is not compiled and I get a syntax error from react-dnd using ES6 syntax.

Can you run all JS files through reactify and not just JSX? That's what I do.

from react-dnd.

Ha, I'm not sure, can I? How do I do that? I tried adding a {global: true} to my grunt-browserify reactify transform config which is supposedly supposed to make it a global transform but no dice. (sorry should have clarified i'm using grunt-browserify)

from react-dnd.

Hmm, it seems like reactify does this already:

reactify transform activates for files with either .js or .jsx extensions.

I'm not too familiar with Browserify so I don't understand why it wouldn't run transform on dependencies.
Indeed, it seems that you need to make reactify a "global" transform but I'm not sure how to specify it with grunt-browserify.

And yeah, I recommend Webpack.

from react-dnd.

For now, i isolated the problem in a simple example: https://github.com/catalinux/react-dnd-example

from react-dnd.

OK I've done some testing - apparently Browserify expects module dependencies to declare which transforms they need to use rather than using my project's transforms. This makes sense the more I think about it because dependencies may need vastly different transforms than what my project uses.

So I've gotten this working with browserify by adding this transform to react-dnd's package.json:

"browserify": { "transform": [["reactify", {"harmony": true}]]}

This seems to be what browserify expects to find for transforms, so it works correctly. The only downside to this is that it requires adding reactify as a peer dependency even though many users won't use it due to using webpack instead. But a large proportion of devs I know use Browserify, so I think this is a worthwhile change to make this "just work" with browserify. I'll submit a PR if you think this is a good fix. Thanks again,

-Dan

from react-dnd.

@catalinux you might want to pull my branch and see if this fixes your issue as well. Looks like you're using es6ify which should theoretically work, but I've had issues with es6ify as well. So if my change doesn't fix your problem, you might try replacing this in your gulpfile:

browserifyTransform = ['reactify', 'es6ify'];

with this:

browserifyTransform = [['reactify', {harmony: true}]];

and see if that works. (I use grunt instead of gulp but I'm assuming the syntax for enabling harmony mode is the same?)

Alternatively, I think you could remove the transform from your gulpfile altogether and just add this to your package.json instead:

"browserify": { "transform": [["reactify", {"harmony": true}]]}

from react-dnd.

@catalinux I fixed your example to compile with https://github.com/catalinux/react-dnd-example/pull/1.

from react-dnd.

Thank you. It compiles but it shows the following error:
Uncaught Error: Invariant Violation: There is no drop target for "person" registered in Person. Have you forgotten to register it? See configureDragDrop in Person main.js:21595invariant

I will try webpack. To be continued.

from react-dnd.

@catalinux I think you're all set now, just configuring react-dnd wrong, see the react-dnd docs and my PR catalinux/react-dnd-example#2

from react-dnd.

It worked! Thank you all :) I am new to all node and react stuff .

I've done also a webpack version of the app: https://github.com/catalinux/react-dnd-example-webpack

It's much cleaner the build side

from react-dnd.

I prefer Webpack because it makes hot reloading possible.

from react-dnd.

I have the same issue (gulp+browserify+reactify) and was able to fix it by adding:

, "browserify":
  { "transform":
    [ [ "reactify" , { "es6": true } ]
    ]
  }

to react-dnd's package JSON, but I really want to do it in my gulpfile somehow. Switching to webpack unfortunately is not a possibility right now.

from react-dnd.

We'll fix it with a build step. I'll try to get it working later this week.

from react-dnd.

I added a build step that puts ES5 code into dist-modules. I also changed main in package.json to point to dist-modules/index.js. I suppose this should fix the issue once and for all.

:-)

npm install --save [email protected]

from react-dnd.

@gaearon just updated to 0.6.1 and indeed, my browserify issues have been resolved :) Thanks very much.

from react-dnd.