When i am trying to send a message using React with above code:

import emailjs from '@emailjs/browser'
const sendEmail = (e) => {
        e.preventDefault();

        emailjs.sendForm('gmail', 'service_*', form.current, 'template_*','public key', )
        .then(
            () => {
            alert('Message successfully sent!');
            window.location.reload(false)
        }, (error) => {
            console.error('Failed to send the message:', error);
            alert(`Failed to send the message: ${error.text}`);
        });
    };

I got the message "Failed to send the message: The Public Key is invalid.

Tying to refresh the Public key and edit the code just like this:

const sendEmail = {
  name: 'James',
  notes: 'Check this out!',
};

emailjs
  .send('SERVICE_ID', 'TEMPLATE_ID', sendEmail, {
    publicKey: 'PUBLIC_KEY',
  })
  .then(
    (response) => {
      console.log('SUCCESS!', response.status, response.text);
    },
    (err) => {
      console.log('FAILED...', err);
    },
  );

When i am trying to send a message using React with above code:

import emailjs from '@emailjs/browser'
const sendEmail = (e) => {
        e.preventDefault();

        emailjs.sendForm('gmail', 'service_*', form.current, 'template_*','public key', )
        .then(
            () => {
            alert('Message successfully sent!');
            window.location.reload(false)
        }, (error) => {
            console.error('Failed to send the message:', error);
            alert(`Failed to send the message: ${error.text}`);
        });
    };

I got the message "Failed to send the message: The Public Key is invalid.

Tying to refresh the Public key and edit the code just like this:

const sendEmail = {
  name: 'James',
  notes: 'Check this out!',
};

emailjs
  .send('SERVICE_ID', 'TEMPLATE_ID', sendEmail, {
    publicKey: 'PUBLIC_KEY',
  })
  .then(
    (response) => {
      console.log('SUCCESS!', response.status, response.text);
    },
    (err) => {
      console.log('FAILED...', err);
    },
  );

• reactjs

Share Improve this question Follow edited Nov 18, 2024 at 13:03 konstantinosiakovou asked Nov 18, 2024 at 10:57 konstantinosiakovoukonstantinosiakovou 1555 bronze badges 4

• Looking at the docs of that provider, you have to call emailjs.init({publicKey: "..."}) with your public key prior to be able to send emails. Have you done this? Alternatively, you can pass an options object like {publicKey: "..."} to emailjs.sendForm(...) You seem to try passing a string instead of an object ... – derpirscher Commented Nov 18, 2024 at 11:05
• @derpirscher Yes, I have tried also to call emailjs.init public key prior but still the same. – konstantinosiakovou Commented Nov 18, 2024 at 11:11
• Well, then either your key is indeed invalid (something only the provider can clarify) or you have done it wrong (ie you don't show you you are using init) But in principle your second example should work, if we assume your pubic key is valid. – derpirscher Commented Nov 18, 2024 at 11:26
• The method can receive up to 4 arguments, and you have 5. – Sergey Khomushin Commented Nov 22, 2024 at 3:45

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Solved! Attached the sendEmail function to an event and used e.preventDefault() to prevent the default form submission behavior:

emailjs.init({ publicKey: '*' }); 

const sendEmail = (e) => { e.preventDefault();

var emailData = {
    name: 'Konstantinos Iakovou | Web developer',
    notes: 'Check this out!',
};

emailjs.send('service_*', 'template_*', emailData).then(
    (response) => {
        alert('Message successfully sent!');
    },
    (error) => {
        console.error('Failed to send the message:', error);
        alert(`Failed to send the message: ${error.text}`);
    },
);

};