• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

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

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

about 3 years ago · Santiago Trujillo
3 Respuestas
Responde la pregunta

0

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;
about 3 years ago · Santiago Trujillo Denunciar

0

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

about 3 years ago · Santiago Trujillo Denunciar

0

for typescript developers

const newWindowObject = window as any; // cast it with any type

let pushNotification = newWindowObject.OneSignal; // now OneSignal object will be accessible in typescript without error

about 3 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda