React Component instead of HTML?

I’m trying to embed Runkit in some documentation for the valuelink library. This is a data binding library so the user needs to see a responsive react component that updates itself when complete. When I press the run button I get the static rendered result instead of a react component that is dynamic. Is there a way to get back a React widget instead of rendered HTML?

If you mean a React component within the output, then you’ll have to include React somehow yourself, for example:

Basically, the viewer will show HTML. You can of of course make the classes and do an initial render in RunKit (like a server side render), and then do subsequent renders in HTML.

Just checking in case there’s a regression - is this how the Rendered HTML viewer should look?

8FA68955-BE38-4F9C-91DD-C1A150CB2E7B

Could you link me to the whole example, or a complete reduction. I’m not sure what’s going on above the code you sent, so for example, if you aren’t manually including a React script it won’t do that on the client. The example I posted above is doing server-side react rendering (and while we’re experimenting with ways of automatically providing these scripts on a client render, right now it will simply render whatever you give it as HTML).

Oh I see that this is just a screenshot of my document – investigating now. But it seems that unpkg is now providing a MIME type of nosniff, will get back to you shortly.

1 Like

Upon further investigation, it appears unpkg is now serving their scripts with the Content-Type text/plain, and X-Content-Type: no sniff, which means the browser is not allowed to change it to javascript. As such, the browser is refusing to load them. Looking to see if this is a temporary issue on their end or if there is something new we are supposed to be doing.

OK, I’ve updated it to use 15.6.2 and it now works. It appears that React 16 is broken on unpkg. Serves me right for using latest. Sorry for the problems!

1 Like

I really appreciate you spotting that, thank you so much @tolmasky.