Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[FORMULARIO DE CONTATOS] [EMAIL JS [ARQUIVO.ENV]

por Igor Fernandes Quaresma
| 25.5k xp | 10 posts

Ola gente eu estou usando a API do Email Js e esta funcionando certinho, mas eu queria esconder meus tokens vou deixar o código aqui

function Contatos() {
    const [isLoading, setIsLoading] = useState(false);


    const handleFormSubmit = (e) => {
    e.preventDefault();
      setIsLoading(true);

    emailjs.sendForm(
      process.env.REACT_APP_SERVICE_ID ,
      process.env.REACT_APP_TEMPLATE_ID,
      e.target, 
      process.env.REACT_APP_USER_ID
    )
    .then(() => {
      ToastAlert('Email enviado com sucesso', 'sucesso');
      setIsLoading(false);
    
    }, () => {
      ToastAlert('Não conseguimos enviar o email', 'erro');
      setIsLoading(false);
    });
  };

Os arquivos .env estão certinhos inclusive a API que esta rodando no axios que é um backend que eu criei esta funcionando, quando eu coloco os tokens manualmente funciona normal dessa fora 'token'.

Estou usando TypeScript, n sei se tem algo haver, mas se alguem conseguir me ajudar. Agradeço

2 respostas
solução!
por RODRIGO SILVA HARDER
| 2300.6k xp | 4888 posts
Alura Scuba Team Monitor de Fórum Ops

Olá Igor, tudo bem?

Seguem algumas dicas que podem te ajudar:

  • Certifique-se de que o arquivo .env está na raiz do seu projeto e que as variáveis estão corretamente formatadas. Por exemplo:

    REACT_APP_SERVICE_ID=seu_service_id
REACT_APP_TEMPLATE_ID=seu_template_id
REACT_APP_USER_ID=seu_user_id

  • Reinicie o servidor de desenvolvimento: sempre que você fizer alterações no arquivo .env, é necessário reiniciar o servidor de desenvolvimento para que as mudanças sejam aplicadas.

  • Verifique se as variáveis de ambiente estão sendo carregadas corretamente: Você pode fazer um console.log para verificar se as variáveis estão sendo lidas corretamente:

    console.log(process.env.REACT_APP_SERVICE_ID);
console.log(process.env.REACT_APP_TEMPLATE_ID);
console.log(process.env.REACT_APP_USER_ID);

  • Verifique o nome do arquivo: O arquivo deve ser nomeado exatamente como .env sem nenhuma extensão adicional. Arquivos como .env.local ou .env.development também são suportados, mas precisam ser configurados corretamente.

  • Uso de variáveis de ambiente em TypeScript: se você estiver usando TypeScript, certifique-se de que o TypeScript reconhece essas variáveis. Você pode precisar adicionar um arquivo env.d.ts na raiz do seu projeto com o seguinte conteúdo:

    declare namespace NodeJS {
  interface ProcessEnv {
    REACT_APP_SERVICE_ID: string;
    REACT_APP_TEMPLATE_ID: string;
    REACT_APP_USER_ID: string;
  }
}

    Espero que dê tudo certo. Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Igor Fernandes Quaresma
| 25.5k xp | 10 posts

Muito obrigado, o problema era o arquivo env.d.ts mesmo, eu aindaestou apanhando um pouco para as particularidades do TypeScript. Mas evoluindo bastante, obrigado