react: React Dom Server: Broken Build for version 15.4.1

Do you want to request a feature or report a bug? BUG

What is the current behavior? It breaks the code execution

file: react-dom/dist/react-dom-server.min.js

117:[function(t,n,r){"use strict";var o=e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;n.exports=o.ReactCurrentOwner},{}]

Beautified:

function(t, n, r) {
  "use strict";
  var o = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
  
  n.exports = o.ReactCurrentOwner
}

Output:

TypeError: Cannot read property 'ReactCurrentOwner' of undefined
    at Object.r.117

What is the expected behavior? var ReactDomServer = require('react-dom/dist/react-dom-server.min.js'); with the desired goal of having a server-side rendering for production which skips unnecessary comments, warnings, etc. React Documentation Page

  • Which versions of React: 15.4.1;
  • platform: NodeJS (server side rendering)
  • Did this work in previous versions of React? I don’t know

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 8
  • Comments: 40 (3 by maintainers)

Most upvoted comments

(see this popular talk on SSR performance in React that recommends it)

You are likely using different versions of React and ReactDOMServer. Please make sure you use the exact same version. I also recommend updating both to 15.4.2.

Note that not only the server build of react-dom is affected; this fails in the same way with React 15.4.2:

var React = require("react/dist/react.min.js");
var ReactDOM = require("react-dom/dist/react-dom.min.js");

(The use case for such an operation is loading the minified version of React inside Atom).

@magv

This accidentally happened to work because package boundaries were fake, but now they are real. However, now I’m not sure we could support this even if we wanted to.

These are UMD bundles. However you are loading them in a CommonJS environment. How would you expect them to “find” one another? They don’t know each other’s locations.

Since you’re in CommonJS, they can’t set globals, like they do in the browser. So react-dom/dist/react-dom.min.js can’t guess that React is located at react/dist/react.min.js.

I understand it’s frustrating this doesn’t work anymore, but it was never officially supported (you won’t find this usage suggested anywhere in the docs), and as far as I understand, it’s not even feasible to support after the true package split.

The real solution here is to bundle your code if you rely on this. If you bundle the code (e.g. with webpack, browserify or rollup), you can always specify alias (or equivalent) to tell the bundler to use react/dist/react.min.js instead of react, and react-dom/dist/react-dom.min.js instead of react-dom. Since the bundler resolves paths everywhere, it would also override the path in react-dom.min.js to refer to the correct React. Without the bundler, we can’t do this.

Let me know if I missed something, but so far it seems like we can’t fix it. Sorry! For server rendering performance, we intend to provide flat precompiled bundles in the future which should have the same effect.