How to run external Javascript file plugin in ReactJS using lifecycle

Question

I'm setting up animation plugin using external Javascript file to create Globe Tag Cloud. I've been tested on normal html it's run well, but when I call on ReactJS it's always give me error message like this:

TypeError: jquery__WEBPACK_IMPORTED_MODULE_6___default(...)(...).SVG3DTagCloud is not a function

I'm using lifecycle method, like this, it's success inject JS file to HTML body but still not working and give me error message.

componentDidMount() {
    var cloudTag = document.createElement('script');

    cloudTag.src = '/svg3dtagcloud.min.js';
    cloudTag.async = true;

    $(document).ready(function () {
      // This is was on the documentation https://github.com/NiklasKnaack/jquery-svg3dtagcloud-plugin
      var entries = [
        {label: 'Tag One', url: '#', target: '_top'},
        {label: 'Tag Two', url: '#', target: '_top'},
        {label: 'Tag Three', url: '#', target: '_top'},
        {label: 'Tag Four', url: '#', target: '_top'},
        {label: 'Tag Five', url: '#', target: '_top'}
      ];

      var settings = {
          entries: entries,
          width: 480,
          height: 480,
          radius: '65%',
          radiusMin: 75,
          bgDraw: true,
          bgColor: '#111',
          opacityOver: 1.00,
          opacityOut: 0.05,
          opacitySpeed: 6,
          fov: 800,
          speed: 1,
          fontFamily: 'Oswald, Arial, sans-serif',
          fontSize: '15',
          fontColor: '#fff',
          fontWeight: 'normal',
          fontStyle: 'normal',
          fontStretch: 'normal',
          fontToUpperCase: true,
          tooltipFontFamily: 'Oswald, Arial, sans-serif',
          tooltipFontSize: '11',
          tooltipFontColor: '#fff',
          tooltipFontWeight: 'normal',
          tooltipFontStyle: 'normal', 
          tooltipFontStretch: 'normal',
          tooltipFontToUpperCase: false,
          tooltipTextAnchor: 'left',
          tooltipDiffX: 0,
          tooltipDiffY: 10
      };

      cloudTag.onload = () => {
        $('#holder').SVG3DTagCloud(settings);
      }
    });

    document.body.appendChild(cloudTag);
}

How to run external Javascript plugins file to run on ReactJS properly? Is any method to run the function inside?

Answer 1

If you can, you shouldn't load libraries like this, unless yoiu can do it in reactive way. What you do in this code, you try to create async side-effect in component. For async actions inside component you should try some middleware. Eg. https://github.com/redux-observable/redux-observable if you're using redux for global state or https://www.npmjs.com/package/redux-thunk . But for performance reasons I would simply download this library at the beginnging and even cache it with web wroker, there is no big gain loading it only when component mounts.