Dynamically load React Component in JS file

Question

I have a couple of react files which contain react components, e.g.:

class MyComponent extends React.Component {
...
}

Currently, I import them using the script elements, e.g.:

<script type="text/babel" src="http://127.0.0.1:3000/myComponent.js"> </script>

I want to dynamically load them from a single js file. Therefore I was following the idea presented here:

    var script = document.createElement('script');
     script.type='text/babel';
    script.onload = function () {
        console.log('done');
        resolve();
    };
    script.src = "http://127.0.0.1:3000/myComponent.js";

    document.head.appendChild(script);

However, onload is never called and I do not get any error message in Chrome. If I change type to "text/javascript" the onload method is called but I get a syntax error: "<" is a undefined token....

I know that I can compile the bable files to js but I dont want to that during development...

you got any solution or work around ? – Asad Dec 03 '19 at 13:26 — Asad, Dec 03 '19 at 13:26

score 0 · Answer 1 · answered Dec 01 '18 at 19:35

Try this alternate code, see if this works for you. Apparently you need babel script before text/babel can be identified as valid.

Look at In browser here: https://babeljs.io/en/setup#installation

var script = document.createElement("script");
script.type = 'text/babel';
script.addEventListener("load", function(event) {
  console.log("Script finished loading and executing");
});
script.src = "https://code.jquery.com/jquery-3.3.1.min.js";
document.getElementsByTagName("script")[0].parentNode.appendChild(script);

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="output"></div>
<script type="text/babel">
  const getMessage = () => "Hello World"; 
  document.getElementById('output').innerHTML = getMessage();
</script>

Dynamically load React Component in JS file

1 Answers1