Is there a way to accomplish `renderToStaticMarkup` on the client-side in React 18

Question

We are currently using ReactDOM.renderToStaticMarkup to render a tooltip within highcharts.

 const chartOptions: Options = {
    chart: { height },
    tooltip: {
      ...,
      formatter: function () {
        return ReactDOMServer.renderToStaticMarkup(
          <OurComponent/>
        )
      }
    },

However in React 18, the renderToStaticMarkup API was removed when React is running in the browser and there is no way that I'm aware of on the client-side to retrieve the static HTML that would be generated from the React component.

We do not have a node server so cannot migrate to SSR to accomplish this.

Highcharts is framework-agnostic so they only accept raw HTML.

Is anyone aware of a way to accomplish this?

score 0 · Answer 1 · answered Sep 23 '22 at 16:10

0

renderToStaticMarkup is NOT removed from react-dom/server. It turned out that we had an incorrect alias in our local webpack.config.js

answered Sep 23 '22 at 16:10

scott dickerson

908
1
5
13

Is there a way to accomplish `renderToStaticMarkup` on the client-side in React 18

1 Answers1