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 ponent you want to render (if so, why)? Or is it a bug/misconfiguration on my side?

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 ponent you want to render (if so, why)? Or is it a bug/misconfiguration on my side?

• javascript
• reactjs
• typescript
• server-side-rendering

• 2 I think this is one of the few ways to do SSR React with Typescript. According to this medium post and this SO answer. – segFault Commented Mar 29, 2020 at 18:11

1 Answer 1

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