javascript - Service ID invalid when trying to use EmailJS with React - Stack Overflow

admin管理员组

文章数量:1345065

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 /

Here is my Contact ponent

    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="/[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 
      })();
`

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 ponent

    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/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./integration
      })();
`

• javascript
• reactjs
• email
• frontend

Share Improve this question Follow asked Jul 9, 2020 at 16:09 SpongeSponge 4511 gold badge11 silver badge44 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 4

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.

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

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.

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

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./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.

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

本文标签： javascriptService ID invalid when trying to use EmailJS with ReactStack Overflow