ReactDOMServer.renderToStaticMarkup() fatals when NODE_ENV is set to production

[alpjor]

Do you want to request a feature or report a bug?
Reporting a Bug

What is the current behavior?
The main issue is an exception that get's thrown when I try to call ReactDOMServer.renderToStaticMarkup() when NODE_ENV is set to production

/Users/alpjor/Documents/Code/rende/rende/client/build/staticWriter.js:4818
    ReactDebugCurrentFrame.getCurrentStack = getStackAddendum;
                                           ^

TypeError: Cannot set property 'getCurrentStack' of undefined
    at setCurrentDebugStack (/Users/alpjor/Documents/Code/rende/rende/client/build/staticWriter.js:4818:44)
    at ReactDOMServerRenderer.read (/Users/alpjor/Documents/Code/rende/rende/client/build/staticWriter.js:5362:9)
    at Object.renderToStaticMarkup (/Users/alpjor/Documents/Code/rende/rende/client/build/staticWriter.js:5747:25)
    at Object../imports/server/staticWriter.js (/Users/alpjor/Documents/Code/rende/rende/client/build/staticWriter.js:2406:108)
    at __webpack_require__ (/Users/alpjor/Documents/Code/rende/rende/client/build/staticWriter.js:20:30)
    at ../rende/config/fe_environment_targets.json.module.exports.local.api.https (/Users/alpjor/Documents/Code/rende/rende/client/build/staticWriter.js:84:18)
    at Object.<anonymous> (/Users/alpjor/Documents/Code/rende/rende/client/build/staticWriter.js:87:10)
    at Module._compile (module.js:649:30)
    at Object.Module._extensions..js (module.js:660:10)
    at Module.load (module.js:561:32)
Error: Command failed: node /Users/alpjor/Documents/Code/rende/rende/client/build/staticWriter.js
    at checkExecSyncError (child_process.js:575:11)
    at Object.execFileSync (child_process.js:593:13)
    at /Users/alpjor/Documents/Code/rende/rende/client/webpack.client.config.js:69:21
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/alpjor/Documents/Code/rende/rende/client/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:18:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/alpjor/Documents/Code/rende/rende/client/node_modules/tapable/lib/Hook.js:35:21)
    at emitRecords.err (/Users/alpjor/Documents/Code/rende/rende/client/node_modules/webpack/lib/Compiler.js:257:22)
    at Compiler.emitRecords (/Users/alpjor/Documents/Code/rende/rende/client/node_modules/webpack/lib/Compiler.js:372:39)
    at emitAssets.err (/Users/alpjor/Documents/Code/rende/rende/client/node_modules/webpack/lib/Compiler.js:251:10)
    at hooks.afterEmit.callAsync.err (/Users/alpjor/Documents/Code/rende/rende/client/node_modules/webpack/lib/Compiler.js:358:14)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/alpjor/Documents/Code/rende/rende/client/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:20:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/alpjor/Documents/Code/rende/rende/client/node_modules/tapable/lib/Hook.js:35:21)
    at asyncLib.forEach.err (/Users/alpjor/Documents/Code/rende/rende/client/node_modules/webpack/lib/Compiler.js:355:27)
    at done (/Users/alpjor/Documents/Code/rende/rende/client/node_modules/neo-async/async.js:2854:11)
    at /Users/alpjor/Documents/Code/rende/rende/client/node_modules/neo-async/async.js:2805:7
    at /Users/alpjor/Documents/Code/rende/rende/client/node_modules/graceful-fs/graceful-fs.js:43:10
    at FSReqWrap.oncomplete (fs.js:153:20)

as long as I change the NODE_ENV to anything other than production things work fine
but in PROD this happens: https://stackoverflow.com/questions/49154914/reactdom-rss-rendertostring-production-error You can use the repo provided to reproduce the error.

The issue seems to stem from ReactDebugCurrentFrame is not defined in production and yet ReactDOMServer tries to access it when NODE_ENV is prod and the error happens

right now I have to break my ReactDOMServer renders out into it's own script and run it when NODE_ENV is not prod

      // hack so that ReactDOMServer.renderStaticMarkup doesn't thrown when
      // called with NODE_ENV = 'production'
      const new_env = Object.create(process.env);
      if (isProduction) new_env.NODE_ENV = 'dev';

      // call staticWriter script
      child_process.execFileSync(
        'node',
        [path.join(
          mainPath,
          'build',
          'staticWriter.js'
        )], {
          stdio: 'inherit',
          env: new_env
        }
      );

The triggering lines from staticWriter.js are here:

fs.writeFileSync(
  path.join(dist, 'index.html'),
  '<!doctype html>\n' +
  ReactDOMServer.renderToStaticMarkup(
    React.createElement(RendeIndex, {javascript: js, css: css})
  )
);

fs.writeFileSync(
  path.join(dist, 'manifest.html'),
  '<!doctype html>\n' +
  ReactDOMServer.renderToStaticMarkup(React.createElement(RendeManifest))
);

You can see the same issue again here (in Chinese) margox/braft-editor#56

this seems to be new in React 16

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

What is the expected behavior?

I would expect to be able to call ReactDOMServer.renderToStaticMarkup with NODE_ENV = production and have it work to turn react classes into a HTML string document.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

I think this is new in React16.

[gaearon]

This looks like you’re using production version of the react package with a development version of the react-dom package. That’s not supported. I haven’t looked at your repo yet but I hope this helps!

[alpjor]

@gaearon Thank you. You were right. I compiled staticWriter with a dev version of react-dom and then called it with NODE_ENV=production. I've fixed it so that I now compile with the right NODE_ENV for each environment. You da' bes!