How do you import a javascript package from a cdn/script tag in React?

Question

I'd like to import this javascript package in React

<script src="https://cdn.dwolla.com/1/dwolla.js"></script> 

However, there is no NPM package, so I can't import it as such:

import dwolla from 'dwolla' 

or

import dwolla from 'https://cdn.dwolla.com/1/dwolla.js' 

so whenver I try

dwolla.configure(...) 

I get an error saying that dwolla is undefined. How do I solve this?

Thanks

Answer 1

Go to the index.html file and import the script

<script src="https://cdn.dwolla.com/1/dwolla.js"></script> 

Then, in the file where dwolla is being imported, set it to a variable

const dwolla = window.dwolla; 

Answer 2

This question is getting older, but I found a nice way to approach this using the react-helmet library which I feel is more idiomatic to the way React works. I used it today to solve a problem similar to your Dwolla question:

import React from "react"; import Helmet from "react-helmet";  export class ExampleComponent extends React.Component {     constructor(props) {         super(props);          this.state = {             myExternalLib: null         };          this.handleScriptInject = this.handleScriptInject.bind(this);     }      handleScriptInject({ scriptTags }) {         if (scriptTags) {             const scriptTag = scriptTags[0];             scriptTag.onload = () => {                 // I don't really like referencing window.                 console.log(`myExternalLib loaded!`, window.myExternalLib);                 this.setState({                     myExternalLib: window.myExternalLib                 });             };         }     }      render() {         return (<div>             {/* Load the myExternalLib.js library. */}             <Helmet                 script={[{ src: "https://someexternaldomain.com/myExternalLib.js" }]}                 // Helmet doesn't support `onload` in script objects so we have to hack in our own                 onChangeClientState={(newState, addedTags) => this.handleScriptInject(addedTags)}             />             <div>                 {this.state.myExternalLib !== null                     ? "We can display any UI/whatever depending on myExternalLib without worrying about null references and race conditions."                     : "myExternalLib is loading..."}             </div>         </div>);     } } 

The use of this.state means that React will automatically be watching the value of myExternalLib and update the DOM appropriately.

Credit: https://github.com/nfl/react-helmet/issues/146#issuecomment-271552211