Emailjs 在开发中工作但不在生产中

Question

我有一个带有联系表的 Next js 应用程序。我正在使用 Emailjs 向我的 gmail 帐户发送电子邮件。这在开发中非常有效，但是一旦我部署它就停止工作并且它给了我这个消息：

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

这是我的代码（与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);

我正在使用 .env 文件来获得实际值，并且正如我所说，在开发中完美运行。

我是否遗漏了一些使其在生产中运行的东西？

Answer 1

注销环境变量。它们很可能在生产中未定义。 NextJS environment variables documentation

文档中的示例 - 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,
  }
}

Answer 2

我目前在使用 EmailJS 的密钥时遇到了类似的问题，我发现 Emile 的这个答案帮助我了解了更多。

Answer 3

我在使用 NextJS 时也遇到了这个问题。在我的例子中，我在 .env.local 文件中的变量前加上 NEXT_PUBLIC_，然后它就像一个魅力。

例如，NEXT_PUBLIC_EMAIL_SERVICE_ID 而不是 EMAIL_SERVICE_ID。

PS: 修改.env.local文件后记得重启服务器

Emailjs 在开发中工作但不在生产中

Emailjs working in development but not in production

email

development-environment

reactjs

next.js