在Next.js中导入外部Discord项目代码时遇zlib-sync编译错误求助

核心问题本质 #

你不能在Next.js前端代码中直接导入Discord机器人的client实例——Discord.js是Node.js专属库，依赖大量Node原生API（如zlib-sync这类二进制模块），前端浏览器环境完全不支持，Webpack也无法处理这类原生二进制文件，这就是编译报错的根本原因。

正确解决方案：通过API层通信 #

调整架构，让Next.js面板和Discord机器人通过HTTP API（或WebSocket）交互，而不是直接共享代码实例。

步骤1：在Discord机器人项目中搭建API接口 #

在phoenixts项目里新增一个简单的HTTP服务，暴露你需要的功能（比如获取服务器列表）：

// phoenixts/api/guilds.js
const express = require('express');
const app = express();
const { client } = require('../Classes/Client/Client');

// 身份验证（生产环境必须加，比如用Discord OAuth2或API密钥）
const authenticate = (req, res, next) => {
  const apiKey = req.headers['x-api-key'];
  if (apiKey === process.env.API_SECRET) next();
  else res.status(401).json({ error: 'Unauthorized' });
};

// 获取机器人所在的服务器列表
app.get('/api/guilds', authenticate, (req, res) => {
  const guildList = client.guilds.cache.map(guild => ({
    id: guild.id,
    name: guild.name,
    icon: guild.iconURL({ size: 64 }),
    memberCount: guild.memberCount
  }));
  res.json(guildList);
});

// 启动API服务
const PORT = process.env.API_PORT || 3001;
app.listen(PORT, () => console.log(`Bot API running on port ${PORT}`));

步骤2：在Next.js面板中调用API #

修改GuildsContent.tsx，通过fetch调用机器人API获取数据：

// welfare-web/components/GuildsContent.tsx
'use client';
import { useEffect, useState } from 'react';

interface Guild {
  id: string;
  name: string;
  icon: string | null;
  memberCount: number;
}

export default function GuildsContent() {
  const [guilds, setGuilds] = useState<Guild[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchGuilds = async () => {
      try {
        const res = await fetch(`${process.env.NEXT_PUBLIC_BOT_API_URL}/api/guilds`, {
          headers: {
            'x-api-key': process.env.NEXT_PUBLIC_API_SECRET!
          }
        });
        if (!res.ok) throw new Error('Failed to fetch guilds');
        const data = await res.json();
        setGuilds(data);
      } catch (err) {
        console.error(err);
      } finally {
        setLoading(false);
      }
    };
    fetchGuilds();
  }, []);

  if (loading) return <div>加载中...</div>;

  return (
    <div className="space-y-4">
      <h2 className="text-xl font-bold">我的服务器</h2>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {guilds.map(guild => (
          <div key={guild.id} className="border rounded-lg p-4 flex items-center gap-3">
            {guild.icon ? (
              <img src={guild.icon} alt={guild.name} className="w-10 h-10 rounded-full" />
            ) : (
              <div className="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center">
                <span className="text-gray-600">{guild.name.charAt(0)}</span>
              </div>
            )}
            <div>
              <h3 className="font-medium">{guild.name}</h3>
              <p className="text-sm text-gray-500">{guild.memberCount} 成员</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

额外配置 #

在Next.js项目的.env.local中添加环境变量：

NEXT_PUBLIC_BOT_API_URL=http://localhost:3001
NEXT_PUBLIC_API_SECRET=你的API密钥

为什么之前的尝试无效？ #

• zlib-sync是Node.js原生二进制模块，Webpack无法将其打包到前端代码中，浏览器也没有对应的运行环境
• transpilePackages仅针对JS/TS代码生效，完全无法处理二进制文件

内容的提问来源于stack exchange，提问作者Unknown GamerVazMaster ツ