-
Notifications
You must be signed in to change notification settings - Fork 46.9k
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
Fix AMD and Brunch issues #8686
Conversation
@@ -0,0 +1,10 @@ | |||
{ | |||
"name": "systemjs-builder-test", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I guess you meant to name this "rjs-test". Apart from that, there's not much I can contribute here I'm afraid. :-(
For SystemJS, it seems like we can force it to prefer CommonJS (which solves the issue) by mangling |
var toReplace = | ||
`function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.${this.data.standalone} = f()}}`; | ||
if (src.indexOf(toReplace) === -1) { | ||
throw new Error('wrapperify failed to find code to replace'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
may want to refer to the wrapperify instance in this error as wrapperifyAddons
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yea, doesn't really matter for now, this is all too confusing and broken to get it in.
I'm thinking of alternate approaches now.
bff912e
to
baac473
Compare
nextChildMapping = ReactTransitionChildMapping.getChildMapping( | ||
nextProps.children, | ||
ReactAddonsDOMDependencies.getReactInstanceMap().get(this)._debugID | ||
); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I opted to just remove this dependency. Its only use is to add the stack trace in this particular case. I think we can live without it like it was in 0.14 (and it wouldn't be able to do this in userland anyway).
var ReactDOM = require('ReactDOM'); | ||
|
||
var ReactDOMUMDEntry = Object.assign({ | ||
__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: { | ||
ReactInstanceMap: require('ReactInstanceMap'), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This was only used for that stack trace so we can remove it too now.
// Inject ReactDOM into React for the addons UMD build that depends on ReactDOM (TransitionGroup). | ||
// We can remove this after we deprecate and remove the addons UMD build. | ||
if (React.addons) { | ||
React.__SECRET_INJECTED_REACT_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = ReactDOMUMDEntry; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is where we inject ourselves into React now.
return ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactInstanceMap; | ||
var ReactWithAddonsUMDEntry = require('ReactWithAddonsUMDEntry'); | ||
// This is injected by the ReactDOM UMD build: | ||
return ReactWithAddonsUMDEntry.__SECRET_INJECTED_REACT_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The worst case (it doesn't exist) is the same worst case we already had before when ReactDOM
wasn't available yet, but at least this works with AMD. I don't think it's realistic that people will get here though, unless they have mismatching React versions (which breaks in other subtle ways anyway).
@@ -11,24 +11,24 @@ | |||
|
|||
'use strict'; | |||
|
|||
var React = require('React'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think this is safe... doesn't it result in React getting packaged into the ReactDOM bundle? I would expect build/react-dom.js
just exploded in size.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think so—don't we requite React
all over the place in ReactDOM
? For example ReactCompositeComponent
(now part of ReactDOM
) uses React.isValidElement
. I think @sebmarkbage made it work during the package split.. somehow. Maybe with this.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
(And I'm not seeing any noticeable changes in size, it's all within 100 bytes.)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah yea, that get's rewritten to the ReactUMDShim. Sorry, just experiencing some light PTSD thinking about making AMD again. Carry on then :)
We used to read ReactDOM as a global inside ReactAddonsDOMDependenciesUMDShim. This didn't work in AMD environments such as RequireJS and SystemJS. Instead, I changed it so that ReactDOM gets injected into ReactWithAddons by ReactDOM itself. This way we don't have to try to require it (which wouldn't work because AMD doesn't handle circular dependencies well). This means you have to load ReactDOM first before using ReactDOM-dependent addons, but this was already the case before. This commit makes all build fixtures pass.
@zpao @sebmarkbage @spicyj Should be ready for review, who wants to do it? |
return ReactDOM; | ||
}; | ||
function getReactDOM() { | ||
var ReactWithAddonsUMDEntry = require('ReactWithAddonsUMDEntry'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This should be safe since we only use ReactAddonsDOMDependenciesUMDShim
in the addons build. Again, build sizes looked normal.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Otherwise, seems like this should be fine. I'll accept but up to you if you think anybody else who's been paying closer attention recently needs to take a look.
return ReactDOM; | ||
}; | ||
function getReactDOM() { | ||
var ReactWithAddonsUMDEntry = require('ReactWithAddonsUMDEntry'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Probably not a huge deal in the grand scheme, but could potentially memoize this so we don't have to enter require
on every call.
See facebook#8556 and brunch/brunch#1591 (comment) for context. This appears to be a Brunch bug but we can keep a temporary fix until the next major.
@gaearon awesome job, you just made all the brunch(er) really happy ;) |
* Add manual build fixtures * Inject ReactDOM into ReactWithAddons from ReactWithAddons We used to read ReactDOM as a global inside ReactAddonsDOMDependenciesUMDShim. This didn't work in AMD environments such as RequireJS and SystemJS. Instead, I changed it so that ReactDOM gets injected into ReactWithAddons by ReactDOM itself. This way we don't have to try to require it (which wouldn't work because AMD doesn't handle circular dependencies well). This means you have to load ReactDOM first before using ReactDOM-dependent addons, but this was already the case before. This commit makes all build fixtures pass. * Memoize ReactDOM to avoid going into require on every access * Add Brunch fixture * Inline requires to work around Brunch bug See #8556 and brunch/brunch#1591 (comment) for context. This appears to be a Brunch bug but we can keep a temporary fix until the next major. (cherry picked from commit ca2c71c)
After upgrading to
As part of my webpack build, I include |
Please bring it up with Webpack, it is their decision to emit a message in this case. There is nothing wrong with your build. (But note that in production you want |
FYI we're still using React w/ RequireJS and the r.js optimizer on TED.com -We're planning migration to webpack eventually but not for a while. |
👍 |
This fixes #8392 and adds manual build fixtures so we can more easily check regressions like this.
We used to read ReactDOM as a global inside ReactAddonsDOMDependenciesUMDShim.
This didn't work in AMD environments such as RequireJS and SystemJS.
Instead, I changed it so that ReactDOM gets injected into ReactWithAddons by ReactDOM itself.
This way we don't have to try to require it (which wouldn't work because AMD doesn't handle circular dependencies well).
This means you have to load ReactDOM first before using ReactDOM-dependent addons, but this was already the case before.
This commit makes all build fixtures pass.
Build size changes appear insignificant.