Error using react-dom/server function renderToString

[lennertcc]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

• browser version
  Versie 90.0.818.66 (Officiële build) (64-bits)

• SPFx version
  1.10.0

• Node.js version
  v10.22.0

Describe the bug / error

When using
import { renderToString } from 'react-dom/server';

and running
gulp serve

the call to
const stringElement = renderToString(<SomeReactComponent key={index} />)

runs into

react-dom-server.browser.development.js:2543 
Uncaught TypeError: Cannot read property 'getCurrentStack' of undefined
    at pushCurrentDebugStack (react-dom-server.browser.development.js:2543)
    at ReactDOMServerRenderer.read (react-dom-server.browser.development.js:3138)
    at renderToString (react-dom-server.browser.development.js:3628)
    at MySPFxReactComponent.tsx:204

Steps to reproduce

See bug description

Expected behavior

When packaging the solution and using it from the App Catalog, this error does not occur and the renderToString function works as expected.

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[c-eiser13]

I'm on SPFx 1.11.0 and having the same error trying to use renderToStaticMarkup from react-dom/server.

[AJIXuMuK]

@lennertcc @c-eiser13 - sorry for the long delay.
Just to clarify - were you experiencing this error when debugging using local workbench?

[lennertcc]

No, I've always worked with debugging on actual SharePoint Online pages using
?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js
or something similar

Thanks for working on this!

[c-eiser13]

@AJIXuMuK se here, happens to me when running debugger against an actual site, I do not use local workbench. Thanks!

[AJIXuMuK]

Thank you @lennertcc, @c-eiser13 for the quick response.
So the problem here is we always load production versions of react and react-dom.
But when you reference react-dom/server in dev mode - it will load dev version. And that leads to the error.

We're discussing potential ways of loading development versions of react as it also could be beneficial for profiling (as discussed in #6548).
But currently there are no ETAs for that.

As a workaround I can propose the next solution.

1. change your import to use react-dom/server.browser as this is the correct module to reference client-side.
2. Add additional processing in gulpfile.ls to always load production build:

if (process.env.NODE_ENV !== 'production') {
  let reactDomServerContent = '';

  build.rig.addPreBuildTask({
    name: 'react-dom-server-prebuild',
    execute: async () => {
      try {
        reactDomServerContent = fs.readFileSync('./node_modules/react-dom/server.browser.js', 'utf8');
        fs.writeFileSync('./node_modules/react-dom/server.browser.js',
          `'use strict';
    module.exports = require('./cjs/react-dom-server.browser.production.min.js');
    `);
      } catch (e) {
        console.log(e);
      }
    }
  });

  build.rig.addPostBundleTask({
    name: 'react-dom-server-postbuild',
    execute: async () => {
      fs.writeFileSync('./node_modules/react-dom/server.browser.js', reactDomServerContent);
    }
  });
}