ReactJS中使用node-mailjet模块出现default导出错误求助

问题详情 #

在ReactJS（基于Vite）项目中使用node-mailjet模块时，触发以下错误：

"The requested module '/node_modules/.vite/deps/node-mailjet.js?v=523d8493' does not provide an export named 'default'."

已通过npm安装node-mailjet包，且严格遵循官方文档编写代码，但运行项目时该错误持续出现。

用户原代码：

import Mailjet from 'node-mailjet';
// const Mailjet = require(['node-mailjet']);

const API_KEY = '******';
const API_SECRET = '******';

const mailjet = new Mailjet({
  apiKey: API_KEY,
  apiSecret: API_SECRET,
});

const sendEmail = async () => {
  // const mailjetClient = Mailjet.apiConnect(API_KEY, API_SECRET);

  const request = mailjet.post('send', { version: 'v3.1' }).request({
    Messages: [
      {
        From: {
          Email: 'john@doe.com',
          Name: 'Mailjet Pilot',
        },
        To: [
          {
            Email: 'johndoe@gmail.com',
            Name: 'passenger 1',
          },
        ],
        Subject: 'Your email flight plan!',
        HTMLPart: '<h3>Dear passenger 1, welcome to <a href="https://www.mailjet.com/">Mailjet</a>!</h3><br />May the delivery force be with you!',
      },
    ],
  });

  try {
    const response = await request;
    console.log(response.body);
  } catch (error) {
    console.log('MAILJET ERROR', error.message);
  }
};

export default sendEmail;

错误原因 #

node-mailjet v5及以上版本采用ES模块规范，仅提供命名导出，不再支持默认导出。原代码使用import Mailjet from 'node-mailjet'的默认导入方式，因此触发导出不存在的错误。

另外需要重点注意：node-mailjet是服务端模块，绝对不能直接在React前端代码中使用——前端代码会被编译后暴露在浏览器中，API_KEY和API_SECRET会被任何人获取，导致你的Mailjet账户被恶意滥用。

修复方案 #

步骤1：修正导入方式（仅适用于后端代码） #

如果是在Node.js后端中使用，将导入代码改为命名导入：

import { Mailjet } from 'node-mailjet';

步骤2：迁移邮件逻辑到后端 #

正确的做法是将发送邮件的逻辑放在后端服务中，前端通过API接口调用后端来发送邮件。以下是示例实现：

后端示例（Node.js + Express）

// server.js
import express from 'express';
import { Mailjet } from 'node-mailjet';
const app = express();
app.use(express.json());

const API_KEY = '你的API_KEY';
const API_SECRET = '你的API_SECRET';
const mailjet = new Mailjet({ apiKey: API_KEY, apiSecret: API_SECRET });

app.post('/api/send-email', async (req, res) => {
  try {
    const request = mailjet.post('send', { version: 'v3.1' }).request({
      Messages: [
        {
          From: { Email: 'john@doe.com', Name: 'Mailjet Pilot' },
          To: [{ Email: req.body.toEmail, Name: req.body.toName }],
          Subject: 'Your email flight plan!',
          HTMLPart: '<h3>Dear passenger, welcome to Mailjet!</h3><br />May the delivery force be with you!'
        }
      ]
    });
    const response = await request;
    res.status(200).json({ success: true, data: response.body });
  } catch (error) {
    res.status(500).json({ success: false, error: error.message });
  }
});

app.listen(3001, () => console.log('后端服务运行在3001端口'));

前端React调用示例

// React组件中
const sendEmail = async () => {
  try {
    const response = await fetch('http://localhost:3001/api/send-email', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ toEmail: 'johndoe@gmail.com', toName: 'passenger 1' })
    });
    const data = await response.json();
    console.log('邮件发送结果', data);
  } catch (error) {
    console.log('发送失败', error.message);
  }
};

内容的提问来源于stack exchange，提问作者Ali Asger Ratlamwala