How to import js file in react using online CDN

user_17760833 0
Viewed 1339

Please I am trying to run react app using external CDN, and having issues on the html file saying:

Uncaught ReferenceError: require is not defined index.html:3 This is the html code:

    <!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
    <link rel="stylesheet" href="styles/style.css">
    <script src='https://unpkg.com/react@16.3.1/umd/react.production.min.js'></script>
    <script src='https://unpkg.com/react-dom@16.3.1/umd/react-dom.production.min.js'></script>
    <script src='https://unpkg.com/react-router-dom@5.0.0/umd/react-router-dom.min.js'></script>
    <script src='https://unpkg.com/babel-standalone@6.26.0/babel.js'></script>
  </head>
  <body>
    <div id='root'></div>
    <script type='text/babel'>
      import Todo from 'component/Todo.js';
      const App = () =>(
    <div>
      <h1>My Todos</h1>
      <Todo />
    </div>
      )
    ReactDOM.render(<App />, document.querySelector('#root'));
    </script>
  </body>
</html>

And this the JavaScript code

    function Todo (){
  return (<div className="card">
        <h2>TITLE</h2>
        <div className="actions">
          <button className="btn">Delete</button>
        </div>
      </div>);
}
export default Todo;
reactjs cdn import html javascript
1 Answers

you can import external scripts from another server like this :

componentDidMount() {
  const script = document.createElement("script");
  script.src = "/static/libs/your_script.js";
  script.async = true;
  script.onload = () => this.scriptLoaded();

  document.body.appendChild(script);
}

Then to make sure your file is loaded :

 scriptLoaded() {
   // your stuff to do!
 }

Another way is using react Helmet:

first install it using :

npm install --save react-helmet

then use it like this

  <Helmet>
    <script src="www.test.ts" />

  </Helmet>

note that in this way your script will load in the <head>

user_176647550
Related