OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

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

  • Thread starter Thread starter Nileet Savale
  • Start date Start date
N

Nileet Savale

Guest
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"

Code:
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.
<p>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, " <strong>Unchecked runtime.lastError: The message port closed before a response was received.Understand this error
2Popup.js:28 FAILED... undefined</strong>"</p>
<pre><code>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;

</code></pre>
<p>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.</p>
Continue reading...
 

Latest posts

ن
Replies
0
Views
1
نعمان منذر محمود الجميلي
ن
Top