Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Not able to receive the mails. By using email.js

I was coding for my personal portfolio website in reactJs, when i encountered an error where i wanted to code for my contact me form. Here is the code for the same. I added the correct ids. I went through the documentation of email.js for the same. coded in the necessary manner till not able to receive the mails. The console log showws error, " Unchecked runtime.lastError: The message port closed before a response was received.Understand this error
2Popup.js:28 FAILED… undefined"

import React, { useRef, useState } from 'react';
import emailjs from '@emailjs/browser';
import './Popup.css';

const Popup = ({ onClose }) => {
  const form = useRef();
  const [successMessage, setSuccessMessage] = useState(false);
  const [unsuccessMessage, setUnsuccessMessage] = useState(false);

  const sendEmail = (e) => {
    e.preventDefault();
    console.log('Form submission started');

    emailjs.sendForm(
      'service_6e1s3cf', // Replace with your EmailJS service ID
      'template_rr2odv9', // Replace with your EmailJS template ID
      form.current,
      'hgXMUWhm5foVdWD4s' // Replace with your EmailJS public key
    )
    .then(
      (result) => {
        console.log('SUCCESS!', result.text);
        setSuccessMessage(true);
        setTimeout(() => {
          setSuccessMessage(false);
          closeWithAnimation();
        }, 4000); // Show the success message for 2 seconds before closing the popup
      },
      (error) => {
        console.log('FAILED...', error);
        setUnsuccessMessage(true);
        setTimeout(() => {
          setUnsuccessMessage(false);
        }, 4000); // Show the unsuccessful message for 2 seconds
      }
    );
  };

  const handleClose = (e) => {
    if (form.current && !form.current.contains(e.target)) {
      closeWithAnimation();
    }
  };

  const closeWithAnimation = () => {
    if (form.current) {
      form.current.classList.add('fade-out');
      setTimeout(onClose, 300); // Match the duration of the fade-out animation
    }
  };

  return (
    <div className="popup-overlay" onClick={handleClose}>
      <div className="popup" ref={form}>
        <div className="popup-header">
          <h2 className="popup-title">Message Me</h2>
          <button className="close-button" onClick={closeWithAnimation}>
            &times;
          </button>
        </div>
        <div className="popup-content">
          {successMessage ? (
            <div className="success-message">Message sent successfully!</div>
          ) : (
            <form onSubmit={sendEmail}>
              <input type="text" name="user_name" placeholder="Name*" required />
              <input type="email" name="user_email" placeholder="Email*" required />
              <textarea name="message" placeholder="Message*" required />
              <button type="submit">Send</button>
            </form>
          )}
          {unsuccessMessage && (
            <div className="unsuccess-message">Message sending failed. Please try again.</div>
          )}
        </div>
      </div>
    </div>
  );
};

export default Popup;

I tried changing the code, or even using different account to receive the mail, as i saw a solution where it worked after changing the code.
But no luck failed.

Tags:

2

Answers


  1. 0

    I am getting a similar issue today, using antd,

    import { Button, Form, Input } from 'antd';
import emailjs from '@emailjs/browser';
import { useRef } from 'react';

const { TextArea } = Input;

const ContactForm = ({ form }) => {
const sendForm = useRef(null);

const sendEmail = (values) => {
// e.preventDefault();
console.log(values);
emailjs
  .sendForm('service_y9j6qq2', 'template_3enmvkg', values, {
    publicKey: 'yeT6mDoMNVA7sdQmZ',
  })

  .then(
    () => {
      console.log('SUCCESS!');
    },
    (error) => {
      console.log('FAILED...', error.text);
    }
  );
 };

 return (
<Form
  onFinish={sendEmail}
  scrollToFirstError
  size='large'
  ref={sendForm}
  form={form}
  variant='filled'
  requiredMark='hidden'
  layout='vertical'
  autoComplete='off'
>

    Might it be an issue with their servers ? I have integrated this similarly with useRef as you have done above a number of times and it always works fine

    Login or Signup to reply.
  2. 0

    For your issue, I see you have not attached the reference to the form

     <form ref={form} onSubmit={sendEmail}>

    I was able to solve my issue and it was caused by the shape of the object I was sending , if any one runs into a similar issues

      const sendEmail = (values) => {
setLoading(true);
const templateParams = {
  name: values.name,
  email: values.email,
  message: values.message,
};

emailjs
  .send(
    'service_id',
    'template_id',
    templateParams,
    'public_key'
  )
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search