找不到模块：当我导入 twilio 显示时无法解析 .net，Nextjs 错误

Question

安慰

开始学习Next.js，导入Twilio时提示“fs not found.net not found”

./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

从版本 5 开始， Webpack不包括节点库的 polyfill。

在next.config.js中添加以下Webpack配置应该可以解决问题：

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

Answer 2

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

如果您尝试从前端调用 Twilio API，您将暴露您的 Account SID 和 Auth Token，这可能会被恶意用户获取并用于滥用您的帐户。

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

Here's an example of sending an SMS from React with Twilio (though not with Next.js) that I wrote and here's a blog post that looks like it shows what you should do, by creating an API route in Next.js to send an SMS with Twilio . 无论您希望用 API 做什么，这些帖子都应该让您知道如何处理它。

Answer 3

您正在客户端上运行代码。 或者至少 nextjs 认为您正在客户端上运行代码。 尝试跟踪堆栈跟踪，看看您是如何调用导入net的代码的。