react-dom 15.4.0 does not work in AMD enviroment

[jochenberger]

If I try to load react-dom with RequireJS, I get an error: "Mismatched anonymous define()".
Looking at the react-dom from the 15.4.0 distribution (https://cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react-dom.js), I notice that there seem to be two UMD wrappers at the top.
This is probably related to the change in the packaging structure (#7164 and #7168).

[zpao]

I'm having trouble getting this to reproduce like you say, however I am having an issue. Here's my minimal setup: https://gist.github.com/zpao/6bb8c4c08d5502d3e4d6923ae244fa9f. I'm just getting ReactDOM being undefined.

Can you help clarify your case so we can investigate better?

[Spudbuckets]

Here is a fiddle demonstrating the broken module in ReactDOM.

https://jsfiddle.net/w5xjbgcy/1/

Just change the path to 15.3.0 and ReactDOM will work.

[betalb]

@zpao If you change app.js to this:

define(function (require) {
  require(['react', 'react-dom'], function () {
    require(['react', 'react-dom']);
  });
});

You will get exactly the same behaviour, as was described

[jochenberger]

@zpao I think the different behavior comes from different requirejs setups. I get the error in a Java library that integrates React with the Apache Tapestry framework (https://github.com/eddyson-de/tapestry-react).
My specific problem seems to be the anonymous define in the inner wrapper. If I change that to define('react-dom', [], f), the error goes away.
The other problem (ReactDOM being undefined) is probably caused by the double wrappers. I spent some time trying to get it to work but didn't succeed.

[joe-sky]

Today, I encountered an error while using the SystemJS loader to load react-dom v15.4.0. I don't know if it is the same as the error in this issue:

Promise.all([
  System.import('react'),
  System.import('react-dom')
]).then((modules) => {
  let React = modules[0],
    ReactDOM = modules[1];
});

The specific error message is Uncaught (in promise) Error: (SystemJS) require is not a function.

[pixili]

I seem to have exact same issue.

When I upgrade to newest version ReactDOM was undefined.
When switch back every thing works fine. Without changing a line in my source code.

Currently I changed back, but of course that not the best solution long term solution.

[GiedriusGrabauskas]

@joe-sky, same here.

    ReferenceError: require is not defined
        at eval (http://cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react-dom.js:12:5)
        at eval (http://cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react-dom.js:31:3)
        at eval (http://cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react-dom.js:18229:3)
        at eval (<anonymous>)

And not only for me:
http://stackoverflow.com/questions/40640690/loading-react-15-4-with-system-js-fails-with-require-is-not-defined-error

[Snipzwolf]

It looks like the define and require are the wrong way round, possibly you don't even need the require as it can just return the result of f() in the define callback as even if you swap them around you would never get the ReactDOM object when you require it in other scripts.

[jochenberger]

Ah, I couldn't get it to work yesterday because the gist is broken. It should read React.createElement('h1', {}, 'hello from react'), instead of React.createElement('h1', 'hello from react'),
I can make it work by applying this to react-dom.js:

--- react-dom   2016-11-18 15:16:33.813492205 +0100
+++ react-dom.js    2016-11-18 15:18:09.505958843 +0100
@@ -9,7 +9,7 @@

   // RequireJS
   } else if (typeof define === "function" && define.amd) {
-    require(['react'], f);
+    define(['react'], f);

   // <script>
   } else {
@@ -29,7 +29,7 @@
     f(g.React)
   }
 })(function(React) {
-  (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.ReactDOM = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(_dereq_,module,exports){
+  return (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){return 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.ReactDOM = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(_dereq_,module,exports){
 /**
  * Copyright 2013-present, Facebook, Inc.
  * All rights reserved.

[gaearon]

Can you try submitting a fix?

[jochenberger]

No, because I don't want to sign the CLA.

[gaearon]

While this is unrelated to the issue, is there any particular reason you don't want to sign it? From my reading CLA basically says that you actually wrote that code, and that you give us the copyright and patent rights over your contribution, which is necessary for us to safely it include it in an open source project. Is there anything controversial about this?

[pixeldrew]

Can confirm this fixes my issue.

[zpao]

We can't easily reverse the order of require & define with the more internal one, that's the one generated as a part of browserifying. We might have to write our own umd wrapper piece instead. I'll try a few things out - need to make sure this continues working with webpack globals as well…

[pixeldrew]

Is this UMD output created via babel?

[zpao]

Nope. The internal UMD there is being created by browserify. The outer one is hand-rolled.

[pixeldrew]

Ouch, I see the problem...

[jochenberger]

While this is unrelated to the issue, is there any particular reason you don't want to sign it?

Yes. I am not a lawyer. I don't have the necessary knowledge about such things to be sure about the exact consequences if I sign the CLA and I actually don't want to be bothered with such things. I'd like to help, but if you make it hard for me then I don't.

[umphy]

Hit same error with SystemJS.

[wouterds]

React itself still works (for me) but ReactDOM seems to be broken indeed as of > 15.3.2. I've been looking at it for a while trying a lot of things with shims and everything but without luck.

Had to hardcode React to 15.3.2 for the sake of our deploy scheme.

[gaearon]

Can somebody please point me to a failing SystemJS example? I can’t seem to find one.

[GiedriusGrabauskas]

http://jsfiddle.net/o94Ldd3t/1/

[andres-torres-marroquin]

I can confirm that requirejs + 15.3.0 works fine. Unfortunately I can't say the same for 15.4.0.

[gaearon]

Thanks, we‘re aware the issue exists 😉 .
We are working on a fix in #8374.

[alexisvincent]

I run into this issue as well in SystemJS. Solution for me was to explicitly tell SystemJS the format of react-dom in meta.

[wouterds]

@alexisvincent: They just released 15.4.1 which fixes AMD support, I can confirm, it now works again!