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
.
text/javascript
? Se for um script normal, por que você está tentando importar? De todo o modo, incluir a tagscript
dentro de umreact hook
, embora não seja proibido ou impossível, é, na maioria das vezes, mau sinal.async function
para ouseEffect
- eu supus isso, porque nesses casos oReact
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.