Comments (9)
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.
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.
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.
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.
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.
@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.
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.
Check https://github.com/philix/jsx-requirejs-plugin
from react.
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)
- Bug: Wrong detection of non-boolean attribute when working with React API HOT 2
- Cannot find name 'dialog' HOT 2
- Bug: useMemo has a problem of executing multiple times without changing dependencies HOT 2
- Bug: bug de teste
- [React 19] Export SuspenseException HOT 2
- [React 19] [bug] SVG with dangerouslySetInnerHTML content does not trigger first click HOT 8
- [React 19] - `ReactElement` created from `React.createElement` are not renderable anymore HOT 3
- [Compiler Bug]: function parameter inside component override outer parameter incorrectly
- forceUpdate not work in child component GuardGraph
- [React 19] useOptimistic is not updating its optimistic collection immediately HOT 6
- Bug: useEffect and Event Handler Timing Regressions in React 18 Legacy Mode HOT 1
- [DevTools Bug]: No way to debug suspense events
- [Compiler Bug]: setState in useEffect / react compiler and eslint hooks plugin HOT 1
- [DevTools Bug] Cannot add node "20468" because a node with that id is already in the Store. HOT 1
- [Help Wanted] How can I become a member of reactjs? HOT 1
- [React 19]useEffect cleaned the wrong state in StrictMode HOT 6
- Inability to prioritise hydration & react yields too willingly HOT 2
- [DevTools Bug]: Script tag connection method not working in 6.0.0 HOT 1
- Bug: DevTools 6.0.0 element inspector not working with React Native 0.75 HOT 1
- Bug: re-rendering order of onBlur and onClick inconsistent between desktop and mobile browsers HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react.