Coder Social home page Coder Social logo

React in RequireJS ? about react HOT 9 CLOSED

facebook avatar facebook commented on February 28, 2024
React in RequireJS ?

from react.

Comments (9)

petehunt avatar petehunt commented on February 28, 2024

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?

from react.

zpao avatar zpao commented on February 28, 2024

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.

from react.

alvaromuir avatar alvaromuir commented on February 28, 2024

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

On Thu, May 30, 2013 at 4:58 PM, Paul Oโ€™Shannessy
[email protected]:

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
.

from react.

jriecken avatar jriecken commented on February 28, 2024

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; } );
}

from react.

zpao avatar zpao commented on February 28, 2024

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.

from react.

benjamn avatar benjamn commented on February 28, 2024

@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.

from react.

zpao avatar zpao commented on February 28, 2024

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

from react.

felipecrv avatar felipecrv commented on February 28, 2024

Check https://github.com/philix/jsx-requirejs-plugin

from react.

alex-zhang avatar alex-zhang commented on February 28, 2024

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.

from react.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.