Emailjs working in development but not in production

Question

I have a Next js app that have a contact form. I'm using Emailjs to send email to my gmail account. This works perfect in development, but once I deployed it stoped working and it's giving me this message:

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

this is my code (which is basicly the same as the example in the emailjs web)

    const [result, setResult] = useState(false);
    
      const form = useRef();
    
      const sendEmail = (e) => {
        e.preventDefault();
    
        emailjs
          .sendForm(
            process.env.EMAIL_SERVICE,
            process.env.EMAIL_TEMPLATE,
            form.current,
            process.env.EMAIL_USER
          )
          .then(
            (result) => {
              console.log(result.text);
            },
            (error) => {
              console.log(error.text);
            }
          );
        e.target.reset();
        setResult(true);
      };
    
//THIS CODE IS JUST TO ERASE THE "SENT" MESSAGE AFTER 5 secs
      setTimeout(() => {
        setResult(false);
      }, 5000);

I'm using a .env file to have the actual values, and, as I said, works perfectly in development.

Am I missing something to make it work in production?

Phu Le Ngo · Accepted Answer · 2022-05-05 12:20:34Z

3

I was using NextJS and got this issue too. In my case, I prefixed variables in the .env.local file with NEXT_PUBLIC_, and then it worked like a charm.

E.g., NEXT_PUBLIC_EMAIL_SERVICE_ID instead of EMAIL_SERVICE_ID.

PS: Remember to restart the server after changing the .env.local file.

edited May 5, 2022 at 12:20

answered Apr 13, 2022 at 5:31

Phu Le Ngo

811 silver badge3 bronze badges

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

Comments

Dave · Accepted Answer · 2022-01-03 22:34:02Z

2

Log out the environment variables. Most likely they'll be undefined in production. NextJS environment variables documentation

Example from doc - inside next.config.js:

const {
  PHASE_DEVELOPMENT_SERVER,
  PHASE_PRODUCTION_BUILD,
} = require('next/constants')

// This uses phases as outlined here: https://nextjs.org/docs/#custom-configuration
module.exports = (phase) => {
  // when started in development mode `next dev` or `npm run dev` regardless of the value of STAGING environmental variable
  const isDev = phase === PHASE_DEVELOPMENT_SERVER
  // when `next build` or `npm run build` is used
  const isProd = phase === PHASE_PRODUCTION_BUILD && process.env.STAGING !== '1'
  // when `next build` or `npm run build` is used
  const isStaging =
    phase === PHASE_PRODUCTION_BUILD && process.env.STAGING === '1'

  console.log(`isDev:${isDev}  isProd:${isProd}   isStaging:${isStaging}`)

  const env = {
    RESTURL_SPEAKERS: (() => {
      if (isDev) return 'http://localhost:4000/speakers'
      if (isProd) {
        return 'https://www.siliconvalley-codecamp.com/rest/speakers/ps'
      }
      if (isStaging) return 'http://localhost:11639'
      return 'RESTURL_SPEAKERS:not (isDev,isProd && !isStaging,isProd && isStaging)'
    })(),
    RESTURL_SESSIONS: (() => {
      if (isDev) return 'http://localhost:4000/sessions'
      if (isProd) return 'https://www.siliconvalley-codecamp.com/rest/sessions'
      if (isStaging) return 'http://localhost:11639'
      return 'RESTURL_SESSIONS:not (isDev,isProd && !isStaging,isProd && isStaging)'
    })(),
  }

  // next.config.js object
  return {
    env,
  }
}

answered Jan 3, 2022 at 22:34

Dave

7,7174 gold badges25 silver badges28 bronze badges

1 Comment

Afx Crush Over a year ago

I find this kind of strange. I'm also using a variable for my api data and the page show fine even deployed. The variables and values are setted in the settings of Verces, which is the page I'm using for deploy. You can check it here ikarulus.com

Joaquin Palacios · Accepted Answer · 2022-01-04 03:36:03Z

1

I am currently having a similar issue with the keys of EmailJS and I found this answer of Emile that helped me to understand more about it.

answered Jan 4, 2022 at 3:36

Joaquin Palacios

3431 gold badge14 silver badges39 bronze badges

4 Comments

Afx Crush Over a year ago

longstoryshort user ID and the other keys can be exposed because they are meant to be shown in the browser?

Joaquin Palacios Over a year ago

It seems so @AfxCrush. I sent an email to the support of EmailJS about it though. If it is different than that, I'll let you know.

Afx Crush Over a year ago

Same... yeterday I sent a message to Emailjs contact. Lets see what they have to say. Thank you for your help :)

Afx Crush Over a year ago

Ok. Already got a response: "This is because your .env values are not passed to the SDK. Please note, EmailJS send endpoints don't require authentication, so you can make the call to our API without worrying about security. The user ID is the public key. You can simply change the service ID or the template ID if you want to change the service config."

Collectives™ on Stack Overflow

Emailjs working in development but not in production

3 Answers 3

Comments

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related