0

I'm working on a Typescript app that does server-side rendering and I'm having trouble understanding the usage of ReactDomServer.renderToString and ReactDom.hydrate, specifically the type of arguments they sould receive.

I've found several examples (using JS) passing a JSX tag as the argument the following way:

ReactDomServer.renderToString(<ExampleComponent exampleProp="anyValue" />);

But when I try this on Typescript I get the following error:

Conversion of type 'RegExp' to type 'ExampleComponent' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.

The way I got it working is by invoking React.createElement on my Component:

ReactDomServer.renderToString(
  React.createElement(ExampleComponent, {exampleProp: anyValue})
)

Do you have to call React.createElement on the component you want to render (if so, why)? Or is it a bug/misconfiguration on my side?

Pablo.mtz
  • 152
  • 3
  • 11
  • 2
    I think this is one of the few ways to do SSR React with Typescript. According to this [medium post](https://medium.com/atticus-engineering/server-side-rendering-with-react-and-typescript-8cebb4400b3c) and this [SO answer](https://stackoverflow.com/a/41897800/1514049). – segFault Mar 29 '20 at 18:11

1 Answers1

8

My problem was that the file extension was .ts and it needed to be .tsx for typescript to properly compile JSX.

Pablo.mtz
  • 152
  • 3
  • 11