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.

@LindaPaiste Could you elaborate? I have read that link but I can't find any info about how add external URLs — pmiranda
– pmiranda, Commented Mar 25, 2021 at 22:11
why not loading the js with axios are else. And then wait for the promise to be resolved. — Sysix
– Sysix, Commented Mar 25, 2021 at 22:14
@Sysix how is that? I will update the code of the external library that I need to use — pmiranda
– pmiranda, Commented Mar 25, 2021 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 <script> tag in your HTML. — Linda Paiste
– Linda Paiste, Commented Mar 25, 2021 at 22:21

Linda Paiste · Accepted Answer · 2021-03-25 23:10:18Z

1

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";

answered Mar 25, 2021 at 23:10

Linda Paiste

42.6k8 gold badges81 silver badges118 bronze badges

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

1 Comment

pmiranda Over a year ago

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

The Sirion · Accepted Answer · 2021-03-25 22:35:38Z

-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, 2021 at 22:35

The Sirion

1621 gold badge1 silver badge8 bronze badges

4 Comments

pmiranda Over a year ago

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 Over a year ago

Plus, look at the code of my question there are not exports, just a varwith a function that I need to use

Linda Paiste Over a year ago

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.

moji Over a year ago

This does not answer the question.

Collectives™ on Stack Overflow

Import external JS library and use it inside React component

2 Answers 2

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related