How to wait for in browser JSX compiler before call to render component

Question

(Using the in browser JSX Transformer) When calling a react component from plain javascript, i get an Uncaught ReferenceError.

I try to call a React.js (0.12.2) component from my javascript app. I got a JQuery document.ready handler to do so.

It seams, that the in browser JSX compiler needs some time before react's components are ready to use.

Document.ready might not be an option in that case.

See the example below:

index.html:

<!DOCTYPE html>
<html>
<head lang="en">
    <script src="jquery-2.1.3.min.js"></script>

    <script src="react-0.12.2/JSXTransformer.js"></script>
    <script src="react-0.12.2/react.js"></script>

    <script type="text/jsx" src="reactComponent.js"/>

    <script src="app.js"/>
</head>
<body>
    <div id="target"></div>
</body>

app.js:

$(function () {
        console.log("app.js: " + typeof MyComponent);
        init();
});

component.js:

var MyComponent = React.createClass({
        render: function () {
            return (<div>works</div>)
        }
});

function init() {
        console.log("init: " + typeof MyComponent);
        React.renderComponent(<MyComponent/>, document.getElementById("target"));
}

Running this in the browser outputs in the log:

app.js: undefined
app.js: Uncaught ReferenceError: init is not defined

But when I load the app.js through the jsx transformer, by adding type="text/jsx" in the script tag, it works:

app.js: function
reactComponent.js: init: function

Is there an other way to wait for the JSX transformer to finish, instead of loading all js files with type text/jsx? And am I right, that this is really specific to the in browser JSX transformer

score 4 · Accepted Answer · edited May 23 '17 at 11:50

I'd recommend you switch to a JSX precompiler workflow if you can (like using gulp or grunt for example if you were using NodeJS). That way, you won't have to worry about this sequencing problem.

Until you can switch, I'd suggest putting your application initialization in the last text/jsx script file loaded. That way, it will always execute after the DOM has fully loaded and is ready to be used. You shouldn't need to rely on the jQuery event if you make this change.

You could even switch the last file to just be processed as test/jsx, even though it may not contain any JSX functionality currently:

<script src="app.js" type="text/jsx"></script>

(By the way, you shouldn't use self-closing tags for for scripts, see here).

score 0 · Answer 2 · answered Aug 27 '15 at 08:46

while a precompiler workflow might be ideal, for me it's much easier to use raw jsx when developing.

to ensure all the jsx has finished compiling, I use a simple wait loop in the onload trigger before real work commences:

  <script>
    'use strict';
    let i = 0;
    function init() {

      // limit loops if compiling problems
      if( i++ > 5 ) return;

      // last item in last .jsx has not been compiled
      if( !LastDefinedComponent ) return setTimeout( init, 50 );

      // do real work here
    }
  </script>
  ...
  <body onload='init()' >

this works with dynamic or pre-compiled jsx.

How to wait for in browser JSX compiler before call to render component

2 Answers2