React - Using external js from CDN

Sorry, I put this again since the old post got merged into some post that doesn't relate to my question ... I'm new to React and trying to convert a php website into react components. However, in old website there are some function in pure jquery and from CDSNJS. The external javascripts function are not binding well with my component and I cannot figure out how to. Please can anyone give me some advice.

Case 1: I got a an external function like this:

;(function ($) {
    /* Global variables */
    var prty, flickr;
    
    $.fn.flickrGallery = function(flickrID) {
        //Defaults settings  
        var opts = $.extend({}, {
            Key:prty.settings["Key"], 
            Secret:prty.settings["Secret"], 
            User:prty.settings["User"], 
            PhotoSet:flickrID, 
            Speed:400, 
            navigation:1,
            keyboard:1,numberEl:1 });  
         //Setup
         prty.Setup($(this), opts); 
    }; //End FN    
prty = { 
.... Internal code
};
})(jQuery);

And this is my component's code:

async componentDidMount() {

    //$('#gallery').flickrGallery(2); // Not work

    //const el = ReactDOM.findDOMNode(this.display); Not work
    //$(el).vectorMap({map: 'world_mill_en'});
    //$(el).flickrGallery(2); 

    //const el = ReactDOM.findDOMNode(this.domRef); Not work
    //window.$('#addSupModal').modal('show')
    //$(el).flickrGallery(2);

    window.$(this.productIntro).flickrGallery(2); Not work

}

Every time I run, an error like this appears:

Unhandled Rejection (TypeError): window.$(...).flickrGallery is not a function

Case 2:

Beside the case above, I'm also using a lib from CDNJS

<!-- jQuery 1.8 or later, 33 KB -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Fotorama from CDNJS, 19 KB -->
<link  href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>

I have tried including these links into index.html but the same error as above happens when I run ... Please help

Solution

Try to access the flickrGallery function via window.jQuery instead of window.$.

The plugin add the flickrGallery function to jQuery. In most of the time, jQuery should be the same as $. However, in some cases, multiple version of jQuery are loaded and jQuery may no longer be equals to $.

The following suggestions were told to be not solving the problem. I will keep them below in case someone find it useful.

It looks like your react component script is executed and rendered before the external scripts is being executed. There are many causes to it and one of the reasons is the ordering of your script tags.

In the document head, make sure the ordering of your script tag is as follow.

<script src="path/to/external/library.js"></script>
<script src="path/to/your/react/script.js"></script>

These script tags do not have the defer nor async attribute, suggesting they should be downloaded, parsed and executed in order. The external script is executed first.

In other cases, where there are defer, async, etc. attributes are in the script tag, you can understand the order of execution by reading this cheat sheet.

If you are using plugin which adds its functionality to some global variable, your bundler may tree-shake it away because it does not detect any usage of its exports and thinks the module is not needed. In this case, you have to add side effect import (Doc).

In your entry module, add this at the very top:

import 'some-jquery-plugin'