PHP V8Js visualizes a reaction written in typescript

Question

I wrote reaction components with typescript following the instructions in the official typescript docs:

https://www.typescriptlang.org/docs/handbook/react-&-webpack.html

I am using the V8Js php extension to render server side React, but it seems to me that I don’t have enough understanding of what is the right way with V8Js.

this is my response app: (client side)

http://codepen.io/MasterScripter/pen/xqRZQO

I tried to display on the server side:

<?php $v8 = new V8Js(); $react = []; // stubs, react $react[] = "var console = {warn: function(){}, error: print}"; $react[] = "var global = {}"; $react[] = file_get_contents('./dist/react.js'); $react[] = "var React = global.React"; $react[] = file_get_contents('./dist/bundle.js'); $data = [ 'value' => 1, 'onClick' => 'function' ]; $react[] = sprintf( "React.renderComponentToString(Square({data: %s}), print)", json_encode($data)); $react = implode(";", $react); try { $v8->executeString($react); } catch(V8JsException $e) { echo " File: {$e->getJsFileName()} \n Line Number: {$e->getJsLineNumber()} \n Source Line: {$e->getJsSourceLine()} \n Trace: {$e->getJsTrace()} "; } 

'react.js' includes the raw reaction and reaction-dom code, 'bundle.js' includes the webpack package, the same as the pen above.

I get this error:

 File: V8Js::compileString() Line Number: 209 Source Line: module.exports = ReactDOM; Trace: ReferenceError: ReactDOM is not defined at Object.setPrototypeOf.__proto__ (V8Js::compileString():209:18) at __webpack_require__ (V8Js::compileString():47:30) at Object.<anonymous> (V8Js::compileString():300:16) at __webpack_require__ (V8Js::compileString():47:30) at module.exports (V8Js::compileString():93:18) at V8Js::compileString():96:10 

any suggestions / hints how can I do this correctly?

Answer 1

It looks like you need to add

 $react[] = "var React = global.React, ReactDOM = global.ReactDOM, ReactDOMServer = global.ReactDOMServer;"; 

instead

 $react[] = "var React = global.React"; 

(I haven't tested it, just based on this . I also don't have much experience with V8JS. This is for a nice introduction.)