模块未找到:当我导入twilio显示时无法解决'net‘，Nextjs错误

Question

控制台

​

​

我开始学习Next.js。当我导入Twilio时，它会显示错误"fs未找到，net未找到“。

./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
    
    https://nextjs.org/docs/messages/module-not-found

Answer 1

我知道Next.js在客户端和服务器端都运行代码，但是看起来您正在尝试在客户机中使用Twilio库。Twilio库不是为在客户端使用而构建的，这是预期的行为。

如果您试图从前端调用Twilio，您将暴露您的帐户SID和Auth令牌，恶意用户可能会获取这些令牌，并将其用于滥用您的帐户.。

相反，您应该在服务器端调用Twilio，并从前端向自己的服务器发出请求。

下面是我写的发送短信与Twilio的回应的一个例子(虽然不是用Next.js写的)，这里有一篇博客文章，看起来它展示了在Next.js中创建一个API路由，用Twilio发送短消息应该做什么。无论您希望如何使用API，这些帖子都应该给您一个如何处理它的想法。

Answer 2

从第5版开始，Webpack不包括用于节点库的多填充。

在您的next.config.js中添加以下Webpack配置应该可以做到这一点：

const nextConfig = {
  ...
  webpack: config => {
    config.resolve.fallback = { ...config.resolve.fallback, net: false, os: false };
    return config;
  },
  ...
}