Script load in react

Question

I want to load the script from a CDN and then execute a function exposed by that script in React:

componentWillMount() {
    console.log('componentWillMount is called');
    const script = document.createElement('script');
    script.src = 'https://foo.azurewebsites.net/foo.js';
    document.body.appendChild(script);
}


componentDidMount() {
    console.log('componentDidMount is called');
    window.foo.render({
        formId: '77fd8848-791a-4f13-9c82-d24f9290edd7',
    }, '#container');
}


render() {
    console.log('render is called');
    return (
        <div id="container"></div>
    );
}

The script sometimes takes time to load (generally first time) and when componentDidMount() is called "foo" is not available and I get an error like this:

TypeError: Cannot read property 'render' of undefined

How can I assure that componentDidMount() is called once the script is loaded successfully?

@bejado yes just for this component as we need it to be from a cdn — Abhijeet Ahuja
– Abhijeet Ahuja, Commented Mar 17, 2017 at 0:28
Put your application and React script tag below the CDN script tag, so the browser is forced to load the render function first. — bejado
– bejado, Commented Mar 17, 2017 at 0:29
Looks like there is an onload functionality when appending scripts to the document body, so you could have some say a boolean in the component's state to keep track of load status, and in the onload function set the state's 'loaded' boolean to true. Then in your render function check the state value. Here's a google search: google.com.au/…* — Jayce444
– Jayce444, Commented Mar 17, 2017 at 1:01

Sam Lindstrom · Accepted Answer · 2018-11-30 05:09:43Z

26

I don't think it's a good idea to load scripts in componentWillMount() or componentDidMount(), according to React Component Specs and Lifecycle.

The code below may help you.

function new_script(src) {
  return new Promise(function(resolve, reject){
    var script = document.createElement('script');
    script.src = src;
    script.addEventListener('load', function () {
      resolve();
    });
    script.addEventListener('error', function (e) {
      reject(e);
    });
    document.body.appendChild(script);
  })
};
// Promise Interface can ensure load the script only once.
var my_script = new_script('http://example.com/aaa.js');

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      status: 'start'
    };
  }

  do_load = () => {
    var self = this;
    my_script.then(function() {
      self.setState({'status': 'done'});
    }).catch(function() {
      self.setState({'status': 'error'});
    })
  }

  render() {
    var self = this;
    if (self.state.status === 'start') {
      self.state.status = 'loading';
      setTimeout(function () {
        self.do_load()
      }, 0);
    }

    return (
      <div>{self.state.status}   {self.state.status === 'done' && 'here you can use the script loaded'}</div>
    );
  }
}

edited Nov 30, 2018 at 5:09

Sam Lindstrom

592 silver badges12 bronze badges

answered Mar 17, 2017 at 2:55

YUPEN

4003 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jagdeesh Kumar Over a year ago

Hi, I have same problem but I want to call a function which refer to third party script. When I am using ReactJS's build command its giving me error that function is not defined. My script is "appform.autoconvert.co.uk/assets/js/iframe/…" And function I want to use "initParentComms()"

Jagdeesh Kumar Over a year ago

can you please help me out from this problem

mrudult Over a year ago

This doesn't work if the external script depends on some value from a redux store.

Collectives™ on Stack Overflow

Script load in react

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related