问题背景 #

我在Next.js应用中创建Server Action，试图通过自己开发的Discord Bot获取成员头像，编写的Server Action代码如下：

'use server'

import { createDiscordClient } from '@/lib/discord/client';

export async function getMemberProfilePictureAction(userId: string): Promise<string> {
    const client = createDiscordClient()
    await client.login(process.env.DISCORD_TOKEN)

    console.log('Bot Logged In')

    const guild = await client.guilds.fetch(process.env.GUILD_ID!)

    console.log('Guild/Server Fetched')

    const member = await guild.members.fetch(userId)

    console.log('Member Fetched')


    return member.displayAvatarURL({
        size: 1024,
        forceStatic: false
    })
}

首次调用报错 #

调用该Action时，还未输出第一个console.log就报错：

Error: ./node_modules/@discordjs/ws/dist/index.js:573:1
[31m[1mModule not found[22m[39m: Can't resolve '[32mzlib-sync[39m'
[0m [90m 571 |[39m[0m
[0m [90m 572 |[39m [90m// src/ws/WebSocketShard.ts[39m[0m
[0m[31m[1m>[22m[39m[90m 573 |[39m [36mvar[39m getZlibSync [33m=[39m ([35m0[39m[33m,[39m import_util2[33m.[39mlazy)([36masync[39m () [33m=>[39m [36mimport[39m([32m"zlib-sync"[39m)[33m.[39mthen((mod) [33m=>[39m mod[33m.[39m[36mdefault[39m)[33m.[39m[36mcatch[39m(() [33m=>[39m [36mnull[39m))[33m;[39m[0m
[0m [90m     |[39m [31m[1m^[22m[39m[0m
[0m [90m 574 |[39m [36mvar[39m [33mWebSocketShardEvents[39m [33m=[39m [90m/* @__PURE__ */[39m (([33mWebSocketShardEvents2[39m) [33m=>[39m {[0m
[0m [90m 575 |[39m   [33mWebSocketShardEvents2[39m[[32m"Closed"[39m] [33m=[39m [32m"closed"[39m[33m;[39m[0m
[0m [90m 576 |[39m   [33mWebSocketShardEvents2[39m[[32m"Debug"[39m] [33m=[39m [32m"debug"[39m[33m;[39m[0m

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/discord.js/src/index.js
./lib/discord/client.ts
./actions/discord/getMemberProfilePictureAction.ts
./app/(public)/About.tsx
./app/(public)/page.tsx
    at BuildError (webpack-internal:///(pages-dir-browser)/./node_modules/next/dist/client/components/react-dev-overlay/ui/container/build-error.js:43:41)
    at renderWithHooks (webpack-internal:///(pages-dir-browser)/./node_modules/react-dom/cjs/react-dom.development.js:15486:18)
    at updateFunctionComponent (webpack-internal:///(pages-dir-browser)/./node_modules/react-dom/cjs/react-dom.development.js:19612:20)
    at beginWork (webpack-internal:///(pages-dir-browser)/./node_modules/react-dom/cjs/react-dom.development.js:21635:16)
    at beginWork$1 (webpack-internal:///(pages-dir-browser)/./node_modules/react-dom/cjs/react-dom.development.js:27460:14)
    at performUnitOfWork (webpack-internal:///(pages-dir-browser)/./node_modules/react-dom/cjs/react-dom.development.js:26591:12)
    at workLoopSync (webpack-internal:///(pages-dir-browser)/./node_modules/react-dom/cjs/react-dom.development.js:26500:5)
    at renderRootSync (webpack-internal:///(pages-dir-browser)/./node_modules/react-dom/cjs/react-dom.development.js:26468:7)
    at performConcurrentWorkOnRoot (webpack-internal:///(pages-dir-browser)/./node_modules/react-dom/cjs/react-dom.development.js:25772:74)
    at workLoop (webpack-internal:///(pages-dir-browser)/./node_modules/scheduler/cjs/scheduler.development.js:266:34)
    at flushWork (webpack-internal:///(pages-dir-browser)/./node_modules/scheduler/cjs/scheduler.development.js:239:14)
    at MessagePort.performWorkUntilDeadline (webpack-internal:///(pages-dir-browser)/./node_modules/scheduler/cjs/scheduler.development.js:533:21)

安装zlib-sync后的新错误 #

尽管zlib-sync是discord.js的依赖，我还是手动安装了该模块，但出现新错误：

Error: ./node_modules/zlib-sync/build/Release/zlib_sync.node
Module parse failed: Unexpected character '�' (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
    at BuildError (webpack-internal:///(pages-dir-browser)/./node_modules/next/dist/client/components/react-dev-overlay/ui/container/build-error.js:43:41)
    at renderWithHooks (webpack-internal:///(pages-dir-browser)/./node_modules/react-dom/cjs/react-dom.development.js:15486:18)
    at updateFunctionComponent (webpack-internal:///(pages-dir-browser)/./node_modules/react-dom/cjs/react-dom.development.js:19612:20)
    at beginWork (webpack-internal:///(pages-dir-browser)/./node_modules/react-dom/cjs/react-dom.development.js:21635:16)
    at beginWork$1 (webpack-internal:///(pages-dir-browser)/./node_modules/react-dom/cjs/react-dom.development.js:27460:14)
    at performUnitOfWork (webpack-internal:///(pages-dir-browser)/./node_modules/react-dom/cjs/react-dom.development.js:26591:12)
    at workLoopSync (webpack-internal:///(pages-dir-browser)/./node_modules/react-dom/cjs/react-dom.development.js:26500:5)
    at renderRootSync (webpack-internal:///(pages-dir-browser)/./node_modules/react-dom/cjs/react-dom.development.js:26468:7)
    at performConcurrentWorkOnRoot (webpack-internal:///(pages-dir-browser)/./node_modules/react-dom/cjs/react-dom.development.js:25772:74)
    at workLoop (webpack-internal:///(pages-dir-browser)/./node_modules/scheduler/cjs/scheduler.development.js:266:34)
    at flushWork (webpack-internal:///(pages-dir-browser)/./node_modules/scheduler/cjs/scheduler.development.js:239:14)
    at MessagePort.performWorkUntilDeadline (webpack-internal:///(pages-dir-browser)/./node_modules/scheduler/cjs/scheduler.development.js:533:21)

后续尝试与需求 #

我尝试通过nextConfig配置webpack并安装node-loader，但页面无限加载，仅控制台有通用错误和重试信息。我需要解决这些问题，成功获取头像URL字符串，并得知图片路径以在nextConfig中配置允许的URI。

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