Import external JS library and use it inside React component

Question

I have some code in React like this:

useEffect(() => {
  TICautocapture(etc..);

That TICautocapture() function is already defined in an external js file, let's say:

http:://some-cdn.example.com/library.js

So how could I use that library methods on my React component?

I need it to be declared inside the Component, otherwise it wont find the name of the function.

by the way, I cant download the file locally because the library is being updated constantly, so I need to import from an external url.

EDIT:

The code of the library is like this:

// http:://some-cdn.example.com/library.js

var TICautocapture = (function(){
  var lib = {...}
  var error_handler;
  var handleError = (error_code, error_callback) => {...}
  function autocapture(container, options){...}

  return autocapture;
})();

if(window.jQuery){
  (function($){
    $.fn.autocapture = function(options){
      TICautocapture(this.attr('id'), options);
    }
  }(jQuery));
}

And from there I need to use the TICautocapture() method.

probably with [Webpack externals](https://webpack.js.org/configuration/externals/) — Linda Paiste, Mar 25 '21 at 21:59
@LindaPaiste Could you elaborate? I have read that link but I can't find any info about how add external URLs — pmiranda, Mar 25 '21 at 22:11
why not loading the js with `axios` are else. And then wait for the promise to be resolved. — Sysix, Mar 25 '21 at 22:14
@Sysix how is that? I will update the code of the external library that I need to use — pmiranda, Mar 25 '21 at 22:20
Well now I'm not sure if that's the right way if you are just using the package in this component. The webpack externals is a way to make webpack aware of functions that are available in the window/global scope. It's expecting that the scripts are loaded via the ` — Linda Paiste, Mar 25 '21 at 22:21
You might want to try this: https://stackoverflow.com/a/42872625/10431574 — Linda Paiste, Mar 25 '21 at 23:56

score 1 · Answer 1 · answered Mar 25 '21 at 23:10

Your file is loading var TICautocapture into the global scope and also setting a property autocapture on window.jQuery.fn.

I am not confident that this is correct, but I would try using Webpack externals by putting the following in your webpack.config.js

module.exports = {
  // ...
  externalsType: 'script',
  externals: {
    autocapture: [
      'http://some-cdn.example.com/library.js',
      'autocapture', // or maybe 'TICautocapture'?
      'TICautocapture',
    ],
  },
};

And then try importing it in your component file:

import {TICautocapture} from "autocapture";

I'm having errors with the `externalsType` options: `- configuration has an unknown property 'externalsType'. These properties are valid... etc`, and also, without that key, I'm getting a `unexpected token }` whne I try to render the web — pmiranda, Mar 26 '21 at 19:32

score -1 · Answer 2 · answered Mar 25 '21 at 22:35

-1

If it's just a file you have in the project, you can simply import it to where you need like so:

// if it's the default export
import TICautocapture from "./file.js";

or

// if it's NOT the default export and other 
// functions and variables could be imported from that file
import { TICautocapture } from "./file.js";

Of course, in the cases I mentioned, you should make sure they're exported in the files they're exported using export or export default.

If the file is being delivered by a CDN, I'm not really sure but I think just by adding it the the root HTML file will make it available everywhere for you.

answered Mar 25 '21 at 22:35

The Sirion

134
1
8

1

It's not in the project, like i said, is an external file from an external URL, I can't download it and add to to my project. I need to use it directly from the server. – pmiranda Mar 25 '21 at 22:46
Plus, look at the code of my question there are not exports, just a `var`with a function that I need to use – pmiranda Mar 25 '21 at 22:51
1

Once the file is loaded you should be able to access `window.jQuery.fn.autocapture` or `window.TICautocapture` since `var TICautocapture` is in the global scope. – Linda Paiste Mar 25 '21 at 22:59
This does not answer the question. – julianm Aug 25 '21 at 20:30

Import external JS library and use it inside React component

2 Answers2

Linked