CODEWITHSUNDEEP
javascriptreactjsemailfrontend
Sponge
Sponge

Reputation: 45

Service ID invalid when trying to use EmailJS with React

I created a form to contact me on my website, for that I use EmailJS. However when I try to send myself a mail through the contact form I got a 400 Error The service ID is invalid. I followed every steps of that tutorial as I haven't use EmailJS before https://blog.mailtrap.io/react-send-email/

Here is my Contact component

    class Contact extends React.Component {
    
      constructor(props) {
        super(props);
        this.state = { feedback: '', name: 'Name', email: '[email protected]' };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        }
    
        render() {
          return (
            <form className="test-mailing">
              <h1>Let's see if it works</h1>
              <div>
                <textarea
                  id="test-mailing"
                  name="test-mailing"
              onChange={this.handleChange}
              placeholder="Post some lorem ipsum here"
              required
              value={this.state.feedback}
              style={{width: '100%', height: '150px'}}
            />
          </div>
          <input type="button" value="Submit" className="btn btn--submit" onClick={this.handleSubmit} />
        </form>
      )
      }

      handleChange(event) {
        this.setState({feedback: event.target.value})
      }
    
      handleSubmit() {
        const templateId = 'template_id';

          this.sendFeedback(templateId, {message_html: this.state.feedback, from_name: this.state.name, reply_to: this.state.email})
      }

      sendFeedback (templateId, variables) {
        window.emailjs.send(
          'gmail', templateId,
          variables
          ).then(res => {
            console.log('Email successfully sent!')
          })
          // Handle errors here however you like, or use a React error boundary
          .catch(err => console.error('Oh well, you failed. Here some thoughts on the error that occured:', err))
        }
}

And here is what I added in my index.html

`<script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/[email protected]/dist/email.min.js"></script>
    <script type="text/javascript">
      (function(){
        emailjs.init("my_user_ID_here"); // Obtain your user ID at the dashboard https://dashboard.emailjs.com/integration
      })();
`

Upvotes: 3

Views: 12388

Answers (6)

Murdoch Khallz
Murdoch Khallz

Reputation: 21

Be sure you included the service id, the template id and also the public key.

Upvotes: 0

JP Calvo
JP Calvo

Reputation: 331

Might as well share a quick fix that would probably save someone's time. I just had the same issue while using the code below.

const notifyOwnerOfGuest = async () => {
  const userId = 'user_...';
  const serviceId = 'service_...';
  const templateId = 'template_...';
  const accessToken = 'e2e1...';

  const postfields = {
    user_id: userId,
    service_id: serviceId,
    template_id: templateId,
    accessToken,
  };

  const response = await fetch('https://api.emailjs.com/api/v1.0/email/send', {
    method: 'POST',
    body: JSON.stringify(postfields),
    // should explicitly add the header content-type here
  });

  if (!response.ok) throw await response.text();
};

I just explicitly added a Content-type header like so

headers: {
    'Content-Type': 'application/json',
},

and now it works.

Upvotes: 0

Kisakyamukama
Kisakyamukama

Reputation: 109

Please try to check whether you are using the right integration id, check the id token you are using with the one under integration id on the dashboard, this was my issue

Upvotes: 0

Magda
Magda

Reputation: 221

Had the same problem. To fix it,

I had to paste NOT the 'gmail' string itself but the service_id which is below the icon gmail

in the EmailJS website after log in. Everyone has its own specific number. Also the template_id is important to put the id generated for your template.

When you want to publish your project it is advisable to place your special ids to the .env file to stay secure.

Upvotes: 1

roshambo
roshambo

Reputation: 347

To fix this, I had to swap out 'gmail' with my service ID.

sendFeedback (templateId, variables) {
        window.emailjs.send(
          ***serviceID here***, templateId,
          variables
          ).then(res => {
            console.log('Email successfully sent!')
          })
          // Handle errors here however you like, or use a React error boundary
          .catch(err => console.error('Oh well, you failed. Here some thoughts on the error that occured:', err))
        }

The JavaScript console in my web browser helped identify this.

Upvotes: 4

crislaez
crislaez

Reputation: 26

That was happening to me, and it was because I didn't have the account activated. when you log in, click on 'email services' and select, for example, gmail with your account

pd: google translate

Upvotes: 1

Related Questions