New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React in RequireJS ? #28

Closed
alvaromuir opened this Issue May 30, 2013 · 9 comments

Comments

Projects
None yet
8 participants
@alvaromuir

alvaromuir commented May 30, 2013

Learning the library. Any tips on getting it to play nice with RequreJS ?

Looks like it needs a shim but I can't figure out what exactly.

thanks!

@petehunt

This comment has been minimized.

Contributor

petehunt commented May 30, 2013

We run React+RequireJS on Instagram.

Check out the repo and run grunt. Then under build/ you'll have a bunch of CommonJS modules that RequireJS can use via its r.js tool.

Does that answer your question?

@zpao

This comment has been minimized.

Member

zpao commented May 30, 2013

What @petehunt said should work, though it exposes more than you need and might lead to information overload (just look at React.js if you do this! this is what gets exposed by the shipping file).

I was hoping the UMD wrapper we have around react.js would just work if you decided to require('React'); (or maybe it's require('react'); If neither of those work then we should definitely try to make this work out of the box without having to do a custom build.

@alvaromuir

This comment has been minimized.

alvaromuir commented May 30, 2013

Thanks guys. A single 'React' would be sweet imho.

On Thu, May 30, 2013 at 4:58 PM, Paul O’Shannessy
notifications@github.comwrote:

What @petehunt https://github.com/petehunt said should work, though it
exposes more than you need and might lead to information overload (just
look at React.js if you do this! this is what gets exposed by the shipping
file).

I was hoping the UMD wrapper we have around react.js would just work if
you decided to require('React'); (or maybe it's require('react'); If
neither of those work then we should definitely try to make this work out
of the box without having to do a custom build.


Reply to this email directly or view it on GitHubhttps://github.com//issues/28#issuecomment-18707918
.

@alvaromuir alvaromuir closed this May 31, 2013

@jriecken

This comment has been minimized.

jriecken commented Jun 3, 2013

I think the issue is probably that the shipped react.js defines an anonymous module rather than one with the id of 'react'.

Unless the file is loaded asynchronously (or merged together with other files using the r.js optimizer), a "Mismatched anonymous define()" error will be thrown. This means that currently the react.js file cannot be loaded via a normal <script> block in an AMD environment.

For example, jQuery does this to define itself as an AMD module:

// Register as a named AMD module, since jQuery can be concatenated with other
// files that may use define, but not via a proper concatenation script that
// understands anonymous AMD modules. A named AMD is safest and most robust
// way to register. Lowercase jquery is used because AMD module names are
// derived from file names, and jQuery is normally delivered in a lowercase
// file name. Do this after creating the global so that if an AMD module wants
// to call noConflict to hide this version of jQuery, it will work.
if ( typeof define === "function" && define.amd ) {
  define( "jquery", [], function () { return jQuery; } );
}
@zpao

This comment has been minimized.

Member

zpao commented Jun 3, 2013

Lets reopen this then until we ship something that works with require.

We're using browserify with the standalone option (which wraps with UMD) to build a mostly compatible module. I'd like to keep the process as simple as possible so we might want to try to fix this in one of those tools.

@zpao zpao reopened this Jun 3, 2013

@benjamn

This comment has been minimized.

Contributor

benjamn commented Jun 3, 2013

@zpao you mean we should modify browserify so that it generates something that works as an AMD module?

RequireJS does have the ability to load modules on demand, which is a different sort of philosophy from the monolithic package that browserify produces. Both approaches can be worthwhile, and it should be easy to support both. We've just implicitly preferred the monolithic package approach so far.

@zpao

This comment has been minimized.

Member

zpao commented Jun 3, 2013

you mean we should modify browserify so that it generates something that works as an AMD module?

Yea. If what @jriecken said is right, then we can maybe get UMD changed (https://github.com/ForbesLindesay/umd/blob/master/template.js#L12 is what gets used by browserify and it very much does not provide a name to define).

Again, I'm not super familiar with RequireJS so maybe we need more. react.js is already React with all the dependencies so I don't think we need to ship a bundle of modules and can stick with the single file so long as it actually works

@philix

This comment has been minimized.

Contributor

philix commented Mar 26, 2014

marocchino pushed a commit to marocchino/react that referenced this issue Feb 22, 2015

@alex-zhang

This comment has been minimized.

alex-zhang commented Dec 4, 2015

i pack the react.js jquery.js redux.js and so on as vender-bundle.js. but the react.js is a anonymous module in AMD define.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment