Next.js导入Twilio时出现Module not found: Can't resolve 'net'错误求助

我刚开始学习Next.js，导入Twilio时遇到如下错误：

./node_modules/https-proxy-agent/dist/agent.js:15:0
Module not found: Can't resolve 'net'

Import trace for requested module:
./node_modules/https-proxy-agent/dist/index.js
./node_modules/twilio/lib/base/RequestClient.js
./node_modules/twilio/lib/index.js
./components/Login/ForgotPassword.jsx
./components/Login/Login.js
./pages/login/index.js

解决方案 #

1. 将Twilio逻辑移至服务器端（推荐） #

Twilio SDK依赖Node.js内置模块（如net、fs），这些模块在浏览器环境中不存在，因此必须把Twilio相关代码放在服务器端执行，比如Next.js的API路由：

在pages/api目录下创建处理Twilio逻辑的文件（如pages/api/verify-code.js）：

import twilio from 'twilio';

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ msg: '仅支持POST请求' });
  }

  const { phone } = req.body;
  const accountSid = process.env.TWILIO_ACCOUNT_SID;
  const authToken = process.env.TWILIO_AUTH_TOKEN;
  const client = twilio(accountSid, authToken);

  try {
    const verification = await client.verify.v2.services(process.env.TWILIO_SERVICE_SID)
      .verifications
      .create({ to: phone, channel: 'sms' });
    
    res.status(200).json({ status: verification.status });
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
}

然后在客户端组件（如ForgotPassword.jsx）中通过fetch调用该API：

const sendVerifyCode = async (phoneNumber) => {
  try {
    const res = await fetch('/api/verify-code', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ phone: phoneNumber })
    });
    const data = await res.json();
    console.log('验证码发送状态:', data.status);
  } catch (err) {
    console.error('发送失败:', err);
  }
};

2. 客户端环境下的临时兼容（不推荐） #

如果确实需要在客户端引入Twilio，可在next.config.js中配置Webpack忽略缺失的Node.js模块，但部分功能可能无法正常运行：

module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback = {
        fs: false,
        net: false,
        tls: false
      };
    }
    return config;
  }
};

核心原因 #

Twilio SDK为Node.js环境设计，依赖浏览器不支持的内置模块；Next.js客户端组件运行在浏览器中，直接导入会导致模块找不到的错误，因此服务器端执行是标准解决方案。

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