I'm starting a new React project in TypeScript and its a conversion of an old project that was done in basic JS and HTML. There is a web library written in JS I'm trying to use but I'm not sure how to import it. In the old project it was just imported with a script tag in head. The old function called in the embedded JS was let external = $pop.render(params). The extension for the old import in the script tag was /index.js?mode=api. Any help would be appreciated! Thanks in advance! The library is a custom private js library. I have tried import "URL TO LIBRARY";, jQuery.getScript(), and import * as Pop from 'URL';. It is an AMD based module.
-
You need to provide a little more information: Which library are you trying to import? What have youried so far?JAM– JAM2021-02-26 19:37:04 +00:00Commented Feb 26, 2021 at 19:37
-
Is this private library written as modules? Maybe CommonJS or AMD based modules? What does the code look like?Stanislas– Stanislas2021-02-26 19:55:58 +00:00Commented Feb 26, 2021 at 19:55
-
2You can't import from URLs, can you? Webpack will add the module for you if used. You need to download the module to a file and import it from a file path.0xLogN– 0xLogN2021-02-26 20:25:22 +00:00Commented Feb 26, 2021 at 20:25
Add a comment
|
1 Answer
I was able to solve it by keeping it as a script tag import in the HTML file then calling the functions I needed from the window window.$pop.render(params). I had to add declare global { interface Window { $pop:any;}} so TypeScript knew to expect $pop in window. I got this by cominbing these solutions: How do I use external script that I add to react JS? and TypeScript error: Property 'X' does not exist on type 'Window' .