Doesn't Play Nice with react-dom/server

[spudly]

I have a terminal application that includes a server for rendering html with react. I tried to integrate react-blessed so that I could create a better experience in the terminal using react. Everything works as expected until a request comes in, which causes something to be rendered with react-dom/server.

When that happens, I get the error, "Invalid blessed element "html" which is created in src/ReactBlessedComponent.js on line 110. (after trying to render a component that begins with an tag)

Why is react trying to mount the element using react-blessed when I called ReactDomServer.render()?

I'm guessing it has something to do with the lowercased tags being mapped to blessed widgets but I'm not sure where to look.

If someone can point me in the right direction, I'd be willing to submit a pull request to fix the issue.

[Yomguithereal]

Hello @spudly. The thing is React dependency injection is quite weird and does not go well when different renderers are used in the same script because a single React instance will share things with both renderers.

Check, for instance this lib's injection file mimicking react-dom's one and you'll see the problem. The second renderer will tell React that its component is the real thing and override the first one, hence you problem with html being rendered instead of blessed elements.

I am not sure what kind of solution exist in this case but we can try to create one together if you want. I guess using some kind of mocking library could work in some way here. Or else using two different scripts by spawning a process in the first one...

[yuchi]

The ‘best’ idea would be to have two completely different versions of react, one for react-blessed and one for react-dom.

[Yomguithereal]

That can work indeed. However, can you register two versions of the same dependency in the same package.json file?

On a side note, even if this would do the trick, it's not satisfactory. But I guess we cannot do much thing about this since this seems to truly be a React issue here.

[yuchi]

Yeah indeed. The fact that React requires to be modified by the renderer somehow shuts the functionality down.

[Yomguithereal]

Dirty hacks it is then.

[spudly]

Darn. Since the React team doesn't have time to work on this it looks like my best options at this point are to either fork my process or spawn two separate subprocesses and somehow facilitate communication between the two.

Thanks for all your help.

[Yomguithereal]

Forks are quite easy to communicate with through process.on('message').

Another solution would be to create a clever hack fixing React's injection by monkey patching it but it will surely break on further updates.