React作品集网站集成Emailjs提交表单报错：sendForm is not a function

问题根源 #

• 错误依赖包：你当前导入的email-js是已废弃的旧包，其API与官方最新版本不兼容，不存在sendForm方法
• 版本不匹配：即使误用了旧包，其方法命名和调用逻辑也和新版@emailjs/browser完全不同

解决方案 #

1. 替换为官方维护的依赖包 #

卸载废弃的旧包，安装最新版：

npm uninstall email-js
npm install @emailjs/browser

2. 修正代码中的导入与逻辑 #

更新后的完整代码如下：

import React, { useRef } from "react";
import "./contact.css";
import emailjs from '@emailjs/browser';

const Contact = () => {
  const form = useRef();

  const sendEmail = (e) => {
    e.preventDefault();

    emailjs.sendForm(
      'service_6kimd8c',
      'template_ql7mhzc',
      form.current,
      'vbCjePCf6E12Qm3kB'
    )
    .then((result) => {
        console.log(result.text);
        alert('邮件发送成功！');
    }, (error) => {
        console.log(error.text);
        alert('邮件发送失败，请重试');
    });

    e.target.reset();
  };

  return (
    <section className="contact" id="contact">
      <h1 className="sub_heading">
        Contact me <span></span>
      </h1>
      <form className="form" onSubmit={sendEmail} ref={form}>
        <div className="field">
          <input
            type="email"
            name="email"
            id="email"
            placeholder="email"
            required
          />
          <label htmlFor="email">Email</label>
        </div>
        <div className="field">
          <input
            type="text"
            name="name"
            id="name"
            placeholder="name"
            required
          />
          <label htmlFor="name">Name</label>
        </div>
        <div className="field">
          <textarea
            name="message"
            id=""
            cols="30"
            rows="10"
            placeholder="输入你的消息"
            required></textarea>
        </div>
        <input type="submit" className="btn" value="Submit" />
      </form>
    </section>
  );
};

export default Contact;

关键修改说明 #

• 导入路径从email-js改为@emailjs/browser，这是EmailJS官方推荐的React环境包
• 新版包的sendForm方法可直接通过默认导出对象调用，与你原有的调用逻辑兼容
• 额外补充了textarea的占位符，优化用户体验

验证依赖安装状态 #

打开项目根目录的package.json，确认dependencies中存在：

"@emailjs/browser": "^3.11.0" // 版本号可能因安装时间不同而变化，包名正确即可

内容的提问来源于stack exchange，提问作者kmkrider