'Emailjs working in development but not in production

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?

reactjsemailnext.jsdevelopment-environment


Solution 1:[1]

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,
  }
}

Solution 2:[2]

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.

Solution 3:[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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dave
Solution 2 Joaquin Palacios
Solution 3

Related Questions