I have a netlify react app. which is connected to my github. I'm using emailjs for receiving the messages from whoever reaches to my app.

emailjs deals with three ids 'SERVICE_ID', 'TEMPLATE_ID' and 'USER_ID'. But I don't wanna use them openly in my ponent js file.

Driver Function

  function sendEmail(e) {
    e.preventDefault();    //This is important, i'm not sure why, but the email won't send without it

    emailjs.sendForm(SERVICE_ID, TEMPLATE_ID, e.target, USER_ID)
      .then((result) => {
          window.location.reload()  //This is if you still want the page to reload (since e.preventDefault() cancelled that behavior)
      }, (error) => {
          console.log(error.text);
      });
  }

I have a netlify react app. which is connected to my github. I'm using emailjs for receiving the messages from whoever reaches to my app.

emailjs deals with three ids 'SERVICE_ID', 'TEMPLATE_ID' and 'USER_ID'. But I don't wanna use them openly in my ponent js file.

Driver Function

  function sendEmail(e) {
    e.preventDefault();    //This is important, i'm not sure why, but the email won't send without it

    emailjs.sendForm(SERVICE_ID, TEMPLATE_ID, e.target, USER_ID)
      .then((result) => {
          window.location.reload()  //This is if you still want the page to reload (since e.preventDefault() cancelled that behavior)
      }, (error) => {
          console.log(error.text);
      });
  }

• javascript
• reactjs
• react-native
• email-client
• react-typescript

• 1 This feels very much like you haven't set environment variables properly. Your ment on Hamza Jadid's answer also notes that the error is shouting about a missing environment variable. You should make sure that you're using Netlify's environment variables properly. – Labu Commented May 31, 2021 at 17:27
• Does this answer your question? Can I use Build Environment Variables in Netlify with Create-React-App? – Hamza Jadid Commented May 31, 2021 at 18:10

3 Answers 3

I think you're referring to environment variables, in order to test that out locally it will vary per the stack you use for creating the app, if you use react create app you can create a .env file in the root of your project and populate the values

REACT_APP_SERVICE_ID ="your_value"
REACT_APP_TEMPLATE_ID ="your_value"
REACT_APP_USER_ID ="your_value"

Don't forget to exclude this file from git, to avoid pushing secrets in your repo. to do that add this to your .gitignore

.env

After that you can call the variables in your code using the process.env like this:

process.env.REACT_APP_SERVICE_ID

Now modify the code:

  function sendEmail(e) {
   // Your code

   emailjs.sendForm(process.env.REACT_APP_SERVICE_ID, process.env.REACT_APP_TEMPLATE_ID, e.target, process.env.REACT_APP_USER_ID)
   // your promise
  }

To make that work in netlify you would have to add the variable in your netlify project, follow this section to do that: https://docslify./configure-builds/environment-variables/#declare-variables

As you noted I added the prefix REACT_APP_, this is because react create app does this:

Note: You must create custom environment variables beginning with REACT_APP_. Any other variables except NODE_ENV will be ignored to avoid accidentally exposing a private key on the machine that could have the same name. Changing any environment variables will require you to restart the development server if it is running.

If you are using gatsby or nextjs the env variables naming convention might change so please be aware of that.

You can set env variables on netlify. Please have a check the below images.

Check Adding env variables to react app

You can create a .env in your root dir and add your keys, api end points,... inside of it.