Email.js Works Locally, But not Once Deployed With React

Question

I have set up Email.js to make a contact page for a website built with Next.js. It works completely fine when run locally, but does not work when hosted. The form does not even reset when the submit button is clicked. I do this in the sendEmail function. The error handler does not trigger either in the .then block. I get this error in the browser console:

Uncaught The user ID is required. Visit https://dashboard.emailjs.com/admin/integration

Here is how I send the emails:

export default function Book(props) {
  const form = useRef();
const [sentMessage, setSentMessage] = useState();
const sendEmail = (e) => {
    e.preventDefault();

    emailjs
      .sendForm(
        props.SERVICE_ID,
        props.EMAIL_TEMPLATE_ID,
        form.current,
        props.USER_ID
      )
      .then(
        function (response) {
          setSentMessage("Message sent successfully!");
        },
        function (error) {
          setSentMessage("Message failed please email directly.");
        }
      );

    document.getElementById("form").reset();
  };

return (
    <div className={styles.container}>
        <div className={styles.formContainer}>
          <form
            className={styles.form}
            ref={form}
            onSubmit={sendEmail}
            id="form"
          >
            <h3>Name (required):</h3>
            <input type="text" required={true} name="user_name"></input>
            <h3>Email (required):</h3>
            <input type="email" required={true} name="user_email"></input>
            <h3>Phone number (required):</h3>
            <input type="number" required={true} name="phone_number"></input>
            <h3>Message (optional):</h3>
            <textarea name="message"></textarea>
            <button type="submit" value="Send">
              Submit
            </button>
            {sentMessage ? <p>{sentMessage}</p> : <p></p>}
          </form>
        </div>
    </div>
  );
}

export async function getServerSideProps() {
  return {
    props: {
      USER_ID: process.env.USER_ID,
      EMAIL_TEMPLATE_ID: process.env.EMAIL_TEMPLATE_ID,
      SERVICE_ID: process.env.SERVICE_ID,
    },
  };
}

I have a .env.local file with the template id, user id and service id that all work fine locally. I use next-env and dotenv-load in the next.config.js file like so:

dotenvLoad();

const withNextEnv = nextEnv();

module.exports = withNextEnv({
  reactStrictMode: true,
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ["@svgr/webpack"],
    });

    return config;
  },
});

I saw some problems online that people had with Gmail and remote email servers, so I switched the account to have no 2 factor authentication and use less secure apps as well. That had no effect.

First thing I'd try to do is console log these environment variables and see if they are alright. — Gabriel Pellegrino
– Gabriel Pellegrino, Commented Jan 28, 2022 at 1:32
I was reluctant to try that out on the live website because it would expose the variables, so I just set up a test site. You were right, I logged the variables on the test project and it came back as undefined. I then learned in searching around that you need to set up environment variables in the next.js dashboard. Thank you. — rpassmore
– rpassmore, Commented Jan 28, 2022 at 2:31

rpassmore · Accepted Answer · 2022-01-28 02:32:06Z

2

All you need to do is set up the environment variables in the next.js dashboard then rebuild the site so they take effect.

answered Jan 28, 2022 at 2:32

rpassmore

615 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Email.js Works Locally, But not Once Deployed With React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related