Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

285
Visualizações
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

over 4 years ago · Santiago Trujillo
3 Respostas
Responde à pergunta

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;
over 4 years ago · Santiago Trujillo Relatório

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

over 4 years ago · Santiago Trujillo Relatório

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

over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda