2

Estou desenvolvendo um site em React e preciso utilizar uma lib JavaScript externa (não tem o pacote npm dele), então tenho um link para importar no site. A princípio pensei em importa-lo no HTML mesmo com a tag script, mas não consegui acessar nenhuma das funções, dando apenas o erro 'funcao' is not defined .

Depois disso fui atrás de uma forma de importar somente onde irei precisar e acabei me deparando com o código abaixo que de fato criou a tag script, mas, mais uma vez não obtive sucesso para invocar a função.

const loadScript = async () => {
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.id = "ID do script";
    script.src = `URL DA LIB`;
    script.async = false;
    document.body.appendChild(script);
    setLoaded(true)
    return () => {
      document.body.removeChild(script);
    };
}

Estou chamando essa função acima usando o useEffect e ainda coloquei um estado para só invocar a função após o loaded for true, mas da mesma forma, continuo recebendo um erro ao compilar porque a função não existe.

Eu consigo usar as funções pelo console do navegador, o que eu entendo que indica que a importação está funcionando de forma correta, então a minha dúvida é como eu devo chamar essa função? Já tentei funcao(), window.funcao() e window['funcao'] e nada, tendo sempre o mesmo erro de 'funcao' is not defined .

3
  • A biblioteca é um modulo ES6 ou é um script normal? Se for um módulo ES6, por que você está incluindo o script com o tipo text/javascript? Se for um script normal, por que você está tentando importar? De todo o modo, incluir a tag script dentro de um react hook, embora não seja proibido ou impossível, é, na maioria das vezes, mau sinal. Commented 31/08/2021 às 22:49
  • Eu acredito que seja script normal. Estou importando seguindo as instruções da API do PagSeguro para a criação de checkout transparente. Até achei um pacote que faz esse checkout, mas vou precisar desse checkout para pagamento recorrente e para carrinho padrão, coisa que esse pacote não suporta. Para referência, segue link da documentação do pagseguro: dev.pagseguro.uol.com.br/reference/…
    – buenojc
    Commented 31/08/2021 às 23:12
  • Eu tentei reproduzir o seu problema e respondi a sua pergunta. O único detalhe que eu não considerei e que eu suponho que você não passou uma async function para o useEffect - eu supus isso, porque nesses casos o React reclama e mostra uma mensagem de erro no console. Como você não mencionou essa mensagem, enfim, se a resposta não resolver o seu problema, adicione mais detalhes. Commented 1/09/2021 às 1:15

1 Resposta 1

5

Para tentar reproduzir o seu erro, eu criei os seguintes arquivos:

index.html

<html lang="en">
<head>
    <meta charset="UTF-8">    
    <title>Document</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
    <div class="root"></div>
    <script type='module' src='app.js'></script>
</body>
</html>

app.js consistente em um módulo javaScript contendo um simples aplicativo React (não usei JSX ou create-react-app porque não me pareceu relevante para o problema):

 const h = React.createElement;

 function Teste(){

     const [sum, setSum] = React.useState("...");            
     React.useEffect(()=>{
         const script = document.createElement('script');
         script.type = "text/javascript";
         script.src = "script.js";
         script.async = false;
         document.body.appendChild(script);
        
         script.addEventListener('load', ()=>{
            setSum(soma(1, 2));
         });

         return () => {
            document.body.removeChild(script);
          };
         
     }, []);

     return h('h1', [], `${sum}`);              
 }

 const root = document.querySelector('.root');
 ReactDOM.render(h(Teste), root);            

e script.js, consistente em um arquivo normal javaScript para teste:

function soma(a, b){
  return a + b;
}

O resultado foi o que segue: o único erro que eu identifiquei e que impede você de acessar as funções do script que você quer carregar consiste em invocar a função setLoaded(true), logo após anexar o elemento ao document.body. Naturalmente, neste momento, o script ainda não foi carregado e as suas funções e variáveis ainda não estão disponíveis.

Esse erro pode ser corrigido, adicionando um eventListener, algo do tipo:

script.addEventListener('load', ()=>{
            setLoaded(true);
         });

No mais, as funções do script carregado se mostraram perfeitamente acessíveis.

Dito isso, talvez seja importante pontuar que eu não estou certo de que esse método com useEffect seja o mais recomendável. Eu simplesmente incluiria no código HTML antes dos scripts React. Mas, salvo recomendação da equipe responsável pelo React, e eu não conheço recomendação neste sentido, devo admitir que isso talvez seja unicamente uma preferência minha.

E, por fim, caso a solução indicada não resolva o seu problema, adicione mais detalhes a sua pergunta, de modo que o seu problema possa ser reproduzível por pessoas tentando responder.

4
  • É importante remover o listener no cleanup do useEffect Commented 1/09/2021 às 15:19
  • @RafaelTavares, na realidade, quando um elemento é removido do programa(isto é, quando não existe mais referência a ele), o Garbage Collector remove os eventos associados a esse elemento(salvo se a criação e remoção for em um loop e o GC não funcionar em uma thread separada). Contudo, o seu comentário me perceber que eu me esqueci de remover o próprio script no cleanup do useEffect, se não a página vai terminar com várias cópias desse script associada ao document.body. Já corrijo isso. Commented 1/09/2021 às 15:57
  • 1
    Você está correto, me confundi na leitura do código, não prestei atenção. O evento está associado ao elemento que você removeu, então não necessariamente precisa remover o listener. Commented 1/09/2021 às 16:08
  • 1
    No seu exemplo, você associou o event listener focus ao objeto window. Como window nunca é removido no JavaScript, é de se esperar que toda que vez que o componente for montado, vai adicionar mais event listener a window. No meu exemplo, o event listener está associado ao elemento script que é removido toda vez que o componente é desmontado e com ele o event listener load. Commented 1/09/2021 às 16:09

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .