SvelteKit导入nodemailer函数报错，需实现表单邮件发送功能

错误原因 #

nodemailer 是依赖Node.js核心模块（如net、tls）的后端工具，不能在浏览器环境中运行。你直接在客户端组件（+page.svelte）中导入mail.js，组件渲染时会在浏览器中加载nodemailer，导致其内部类找不到依赖的构造函数，抛出Class extends value undefined is not a constructor or null错误。

至于取消注释sendEmail("message")能发送邮件，是因为SvelteKit预渲染阶段会在Node环境执行该代码，但客户端加载组件时依然会触发报错，只是你可能未注意到浏览器控制台的错误。

解决方案：将邮件逻辑移到服务器端 #

SvelteKit要求后端操作必须放在服务器端文件（如+page.server.js、+server.js或src/lib/server/下的模块）中，以下是完整实现步骤：

1. 重构邮件工具模块（服务器端专用） #

在src/lib/server/下创建mail.js（该目录下的文件仅在Node环境运行）：

import nodemailer from "nodemailer";

// 初始化邮件传输器
const transporter = nodemailer.createTransport({
    service: 'gmail',
    auth: {
        user: '你的邮箱地址',
        pass: 'Gmail授权码（需开启两步验证后生成）'
    }
});

// 封装发送邮件的异步函数
export async function sendEmail(text) {
    const mailOptions = {
        from: "发件人邮箱",
        to: "收件人邮箱",
        subject: "表单提交消息",
        text
    };

    try {
        await transporter.sendMail(mailOptions);
        return { success: true };
    } catch (error) {
        console.error("邮件发送失败:", error);
        return { success: false, error: error.message };
    }
}

2. 创建服务器端表单处理逻辑 #

在/contact/目录下创建+page.server.js，处理表单POST请求：

import { sendEmail } from '$lib/server/mail.js';
import { fail } from '@sveltejs/kit';

export const actions = {
    default: async ({ request }) => {
        // 获取表单数据
        const formData = await request.formData();
        const message = formData.get('message');

        // 验证输入
        if (!message || message.trim().length === 0) {
            return fail(400, { message: '请输入消息内容' });
        }

        // 调用邮件发送函数
        const result = await sendEmail(message);

        if (!result.success) {
            return fail(500, { message: '邮件发送失败', error: result.error });
        }

        return { success: true };
    }
};

3. 修改客户端组件（+page.svelte） #

移除客户端对sendEmail的导入，改为通过表单提交调用服务器端接口：

<script>
    import Navbar from "../Navbar.svelte";
    import Footer from "../Footer.svelte";
    import { enhance } from '$app/forms';

    let error = '';
    let success = false;
</script>

<Navbar/>

<!-- 使用enhance实现无刷新表单提交 -->
<form 
    method="POST" 
    use:enhance={async ({ form, formData }) => {
        success = false;
        error = '';
        
        const response = await fetch(form.action, {
            method: 'POST',
            body: formData
        });

        if (response.ok) {
            success = true;
            form.reset();
        } else {
            const data = await response.json();
            error = data.message;
        }

        return { cancel: true }; // 取消默认页面刷新
    }}
>
    <textarea 
        name="message" 
        cols="30" 
        rows="10" 
        placeholder="请输入你的消息..."
        required
    ></textarea>

    {#if error}
        <p style="color: #dc2626;">{error}</p>
    {/if}
    {#if success}
        <p style="color: #059669;">邮件发送成功！</p>
    {/if}

    <button type="submit">发送</button>
</form>

<Footer/>

额外注意事项 #

• Gmail需开启两步验证，并生成应用专用密码（App Password）代替原密码，否则会触发登录验证错误。
• 敏感信息（邮箱、密码）不要硬编码，建议放在项目根目录的.env文件中，通过$env/static/private在服务器端读取：

  EMAIL_USER=你的邮箱
  EMAIL_PASS=你的应用专用密码
  

  然后在mail.js中替换为：

  import { EMAIL_USER, EMAIL_PASS } from '$env/static/private';
  // ...
  auth: { user: EMAIL_USER, pass: EMAIL_PASS }
  

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