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加载，如下所示：

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和远程电子邮件服务器时遇到了一些问题，所以我将账户改为没有双因素身份验证，也使用了不太安全的应用程序。这没有任何效果。

Answer 1

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