Email.js 在本地工作，但一旦使用 React 部署就不行

Question

我已经设置 Email.js 为使用 Next.js 构建的网站制作联系页面。它在运行本地时完全正常，但在托管时不起作用。单击提交按钮时，表单甚至不会重置。我在 sendEmail 函数中执行此操作。错误处理程序不会在 .then 块中触发。我在浏览器控制台中收到此错误：

未捕获需要用户ID访问https://dashboard.emailjs.com/admin/integration

这是我发送电子邮件的方式：

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

我有一个 .env.local 文件，其中的模板 ID、用户 ID 和服务 ID 在本地都可以正常工作。我在 next.config.js 文件中使用 next-env 和 dotenv-load，如下所示：

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

我在网上看到人们在使用 Gmail 和远程电子邮件服务器时遇到了一些问题，所以我将帐户切换为没有 2 因素身份验证并使用不太安全的应用程序。那没有效果。

Answer 1

您需要做的就是在 next.js 仪表板中设置环境变量，然后重建站点使其生效。

Email.js 在本地工作，但一旦使用 React 部署就不行

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

javascript

email

environment-variables

reactjs

next.js