Fix AMD and Brunch issues #8686

gaearon · 2017-01-04T21:21:37Z

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.

jochenberger · 2017-01-05T15:42:24Z

fixtures/rjs/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "systemjs-builder-test",


I guess you meant to name this "rjs-test". Apart from that, there's not much I can contribute here I'm afraid. :-(

gaearon · 2017-01-05T15:46:28Z

For SystemJS, it seems like we can force it to prefer CommonJS (which solves the issue) by mangling define call. However this breaks r.js optimizer. I wonder if anybody still uses r.js with React these days.

treyp · 2017-01-05T16:22:59Z

grunt/config/browserify.js

+  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');


may want to refer to the wrapperify instance in this error as wrapperifyAddons

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.

gaearon · 2017-01-05T18:17:10Z

src/addons/transitions/ReactTransitionGroup.js

-      nextChildMapping = ReactTransitionChildMapping.getChildMapping(
-        nextProps.children,
-        ReactAddonsDOMDependencies.getReactInstanceMap().get(this)._debugID
-      );


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

gaearon · 2017-01-05T18:17:32Z

src/umd/ReactDOMUMDEntry.js

 var ReactDOM = require('ReactDOM');

-var ReactDOMUMDEntry = Object.assign({
-  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: {
-    ReactInstanceMap: require('ReactInstanceMap'),


This was only used for that stack trace so we can remove it too now.

gaearon · 2017-01-05T18:17:48Z

src/umd/ReactDOMUMDEntry.js

+// 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;


This is where we inject ourselves into React now.

gaearon · 2017-01-05T18:18:50Z

src/umd/shims/ReactAddonsDOMDependenciesUMDShim.js

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


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

zpao · 2017-01-05T18:28:02Z

src/umd/ReactDOMUMDEntry.js

@@ -11,24 +11,24 @@

 'use strict';

+var React = require('React');


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.

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.

(And I'm not seeing any noticeable changes in size, it's all within 100 bytes.)

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.

gaearon · 2017-01-05T18:48:04Z

@zpao @sebmarkbage @spicyj Should be ready for review, who wants to do it?

gaearon · 2017-01-05T18:57:22Z

src/umd/shims/ReactAddonsDOMDependenciesUMDShim.js

-  return ReactDOM;
-};
+function getReactDOM() {
+  var ReactWithAddonsUMDEntry = require('ReactWithAddonsUMDEntry');


This should be safe since we only use ReactAddonsDOMDependenciesUMDShim in the addons build. Again, build sizes looked normal.

zpao

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.

zpao · 2017-01-05T18:58:50Z

src/umd/shims/ReactAddonsDOMDependenciesUMDShim.js

-  return ReactDOM;
-};
+function getReactDOM() {
+  var ReactWithAddonsUMDEntry = require('ReactWithAddonsUMDEntry');


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 · 2017-01-05T21:16:02Z

ghost · 2017-01-05T21:47:15Z

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

Restuta · 2017-01-08T22:08:26Z

After upgrading to 15.4.2 I started getting:

WARNING in ./~/react-dom/dist/react-dom.js
Critical dependencies:
35:192-199 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
 @ ./~/react-dom/dist/react-dom.js 35:192-199

As part of my webpack build, I include react-dom as a noParse option in webpack and set alias pointing to react-dom/dist/react-dom.js. Any quick thoughts on why I am seeing this? @gaearon

gaearon · 2017-01-09T11:05:53Z

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 react-dom.min.js.)

VinSpee · 2017-01-26T14:34:07Z

@gaearon

I wonder if anybody still uses r.js with React these days.

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.

gaearon · 2017-01-26T14:42:59Z

👍
Glad we fixed it then.

facebook-github-bot added CLA Signed GH Review: review-needed labels Jan 4, 2017

gaearon mentioned this pull request Jan 4, 2017

Cannot use addons.Perf or addons.ReactTransitionGroup in AMD environment with 15.4.1 #8392

Closed

jochenberger reviewed Jan 5, 2017

View reviewed changes

treyp reviewed Jan 5, 2017

View reviewed changes

gaearon force-pushed the fix-amd branch 4 times, most recently from bff912e to baac473 Compare January 5, 2017 18:10

gaearon changed the title ~~[WIP] Wrap ReactWithAddons into a custom wrapper~~ Fix ReactWithAddons build in AMD environment Jan 5, 2017

gaearon commented Jan 5, 2017

View reviewed changes

Add manual build fixtures

cebff96

gaearon force-pushed the fix-amd branch from baac473 to ce864e3 Compare January 5, 2017 18:26

zpao reviewed Jan 5, 2017

View reviewed changes

gaearon force-pushed the fix-amd branch from ce864e3 to db5b7ab Compare January 5, 2017 18:44

gaearon requested a review from sebmarkbage January 5, 2017 18:47

gaearon commented Jan 5, 2017

View reviewed changes

zpao approved these changes Jan 5, 2017

View reviewed changes

gaearon added 3 commits January 5, 2017 19:07

Memoize ReactDOM to avoid going into require on every access

3302174

Add Brunch fixture

fe8d64e

Inline requires to work around Brunch bug

593c70e

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 force-pushed the fix-amd branch from 2f7b164 to 593c70e Compare January 5, 2017 21:01

gaearon changed the title ~~Fix ReactWithAddons build in AMD environment~~ Fix ReactWithAddons build in AMD environments and Brunch Jan 5, 2017

gaearon changed the title ~~Fix ReactWithAddons build in AMD environments and Brunch~~ Fix ReactWithAddons build in AMD environments Jan 5, 2017

gaearon changed the title ~~Fix ReactWithAddons build in AMD environments~~ Fix ReactWithAddons build in AMD environment Jan 5, 2017

gaearon changed the title ~~Fix ReactWithAddons build in AMD environment~~ Fix AMD and Brunch issues Jan 5, 2017

gaearon mentioned this pull request Jan 5, 2017

Question: does brunch support conditional require ? (use case in react@15.4 above) brunch/brunch#1591

Closed

gaearon added Project: Package Split and removed GH Review: review-needed labels Jan 5, 2017

gaearon added this to the 15-next milestone Jan 5, 2017

gaearon merged commit ca2c71c into facebook:master Jan 5, 2017

gaearon deleted the fix-amd branch January 5, 2017 21:16

gaearon mentioned this pull request Jan 5, 2017

Error: Cannot find module 'react-dom/lib/ReactPerf' from 'react/lib/ReactAddonsDOMDependencies.js' #8556

Closed

gaearon modified the milestones: 15-hipri, 15-lopri, 15.4.2 Jan 6, 2017

renovate bot mentioned this pull request Feb 2, 2018

Update dependency react to v0.14.9 - autoclosed signavio/backbone-rel#29

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix AMD and Brunch issues #8686

Fix AMD and Brunch issues #8686

gaearon commented Jan 4, 2017 •

edited

Loading

jochenberger Jan 5, 2017

gaearon commented Jan 5, 2017

treyp Jan 5, 2017

gaearon Jan 5, 2017

gaearon Jan 5, 2017

gaearon Jan 5, 2017

gaearon Jan 5, 2017

gaearon Jan 5, 2017

zpao Jan 5, 2017

gaearon Jan 5, 2017

gaearon Jan 5, 2017

zpao Jan 5, 2017

gaearon commented Jan 5, 2017

gaearon Jan 5, 2017

zpao left a comment

zpao Jan 5, 2017

gaearon commented Jan 5, 2017

ghost commented Jan 5, 2017

Restuta commented Jan 8, 2017

gaearon commented Jan 9, 2017

VinSpee commented Jan 26, 2017 •

edited

Loading

gaearon commented Jan 26, 2017

		@@ -11,24 +11,24 @@

		'use strict';

		var React = require('React');

Fix AMD and Brunch issues #8686

Fix AMD and Brunch issues #8686

Conversation

gaearon commented Jan 4, 2017 • edited Loading

Choose a reason for hiding this comment

gaearon commented Jan 5, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gaearon commented Jan 5, 2017

Choose a reason for hiding this comment

zpao left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gaearon commented Jan 5, 2017

ghost commented Jan 5, 2017

Restuta commented Jan 8, 2017

gaearon commented Jan 9, 2017

VinSpee commented Jan 26, 2017 • edited Loading

gaearon commented Jan 26, 2017

gaearon commented Jan 4, 2017 •

edited

Loading

VinSpee commented Jan 26, 2017 •

edited

Loading