How to use discord.js in Nextjs app dir
Hello, I am trying to use discord.js in my app but getting alot of errors, is this even possible?:
actions.ts
import { getServerAuthStatus } from "@/lib/session";
import { z } from "zod";
import { giveRole } from "./actions";
export default async function Home() {
const session = await getServerAuthStatus();
console.log(session);
async function handleSubmit(values: FormData) {
"use server";
const name = z.string().parse(values.get("name"));
if (name) {
console.log(name);
await giveRole(name);
}
}
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
{JSON.stringify(session)}
<form action={handleSubmit}>
<input type="text" name="name" />
<button type="submit">Submit</button>
</form>
</div>
</main>
);
}
import { getServerAuthStatus } from "@/lib/session";
import { z } from "zod";
import { giveRole } from "./actions";
export default async function Home() {
const session = await getServerAuthStatus();
console.log(session);
async function handleSubmit(values: FormData) {
"use server";
const name = z.string().parse(values.get("name"));
if (name) {
console.log(name);
await giveRole(name);
}
}
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
{JSON.stringify(session)}
<form action={handleSubmit}>
<input type="text" name="name" />
<button type="submit">Submit</button>
</form>
</div>
</main>
);
}
"use server";
import { Client, GatewayIntentBits } from "discord.js";
import { config } from "@/lib/config";
const client = new Client({ intents: [GatewayIntentBits.Guilds] });
client.on("ready", () => {
console.log(`Bot logged in!`);
});
client.login(config.DISCORD_BOT_TOKEN);
export const giveRole = async (name: string) => {
const user = client.users.cache.find(
(user) => user.username.toLowerCase() === name.toLowerCase()
);
const guild = client.guilds.cache.get(config.DISCORD_SERVER_ID);
const role = guild?.roles.cache.find(
(role) => role.id === config.DISCORD_ROLE_ID
);
if (user && guild && role) {
const member = guild.members.cache.get(user.id);
if (member) {
await member.roles.add(role);
}
}
};
"use server";
import { Client, GatewayIntentBits } from "discord.js";
import { config } from "@/lib/config";
const client = new Client({ intents: [GatewayIntentBits.Guilds] });
client.on("ready", () => {
console.log(`Bot logged in!`);
});
client.login(config.DISCORD_BOT_TOKEN);
export const giveRole = async (name: string) => {
const user = client.users.cache.find(
(user) => user.username.toLowerCase() === name.toLowerCase()
);
const guild = client.guilds.cache.get(config.DISCORD_SERVER_ID);
const role = guild?.roles.cache.find(
(role) => role.id === config.DISCORD_ROLE_ID
);
if (user && guild && role) {
const member = guild.members.cache.get(user.id);
if (member) {
await member.roles.add(role);
}
}
};
7 Replies
- event compiled client and server successfully in 1864 ms (306 modules)
- wait compiling...
- event compiled client and server successfully in 350 ms (306 modules)
- wait compiling /_error (client and server)...
- event compiled client and server successfully in 146 ms (311 modules)
- warn Fast Refresh had to perform a full reload due to a runtime error.
- wait compiling /page (client and server)...
- error ./node_modules/.pnpm/@[email protected]/node_modules/@discordjs/ws/dist/index.mjs:522:36
Module not found: Can't resolve 'zlib-sync'
https://nextjs.org/docs/messages/module-not-found
Import trace for requested module:
./node_modules/.pnpm/[email protected]/node_modules/discord.js/src/index.js
./src/app/actions.ts
./src/app/page.tsx
- wait compiling...
- warn ./node_modules/.pnpm/[email protected]/node_modules/discord.js/src/client/websocket/WebSocketManager.js
Module not found: Can't resolve 'zlib-sync' in 'D:\projektit\discord-role\node_modules\.pnpm\[email protected]\node_modules\discord.js\src\client\websocket'
Import trace for requested module:
./node_modules/.pnpm/[email protected]/node_modules/discord.js/src/client/websocket/WebSocketManager.js
./node_modules/.pnpm/[email protected]/node_modules/discord.js/src/index.js
./src/app/actions.ts
./src/app/page.tsx
./node_modules/.pnpm/[email protected]/node_modules/ws/lib/buffer-util.js
Module not found: Can't resolve 'bufferutil' in 'D:\projektit\discord-role\node_modules\.pnpm\[email protected]\node_modules\ws\lib'
Import trace for requested module:
./node_modules/.pnpm/[email protected]/node_modules/ws/lib/buffer-util.js
./node_modules/.pnpm/[email protected]/node_modules/ws/lib/sender.js
./node_modules/.pnpm/[email protected]/node_modules/ws/wrapper.mjs
./node_modules/.pnpm/@[email protected]/node_modules/@discordjs/ws/dist/index.mjs
./node_modules/.pnpm/[email protected]/node_modules/discord.js/src/index.js
./src/app/actions.ts
./src/app/page.tsx
- event compiled client and server successfully in 1864 ms (306 modules)
- wait compiling...
- event compiled client and server successfully in 350 ms (306 modules)
- wait compiling /_error (client and server)...
- event compiled client and server successfully in 146 ms (311 modules)
- warn Fast Refresh had to perform a full reload due to a runtime error.
- wait compiling /page (client and server)...
- error ./node_modules/.pnpm/@[email protected]/node_modules/@discordjs/ws/dist/index.mjs:522:36
Module not found: Can't resolve 'zlib-sync'
https://nextjs.org/docs/messages/module-not-found
Import trace for requested module:
./node_modules/.pnpm/[email protected]/node_modules/discord.js/src/index.js
./src/app/actions.ts
./src/app/page.tsx
- wait compiling...
- warn ./node_modules/.pnpm/[email protected]/node_modules/discord.js/src/client/websocket/WebSocketManager.js
Module not found: Can't resolve 'zlib-sync' in 'D:\projektit\discord-role\node_modules\.pnpm\[email protected]\node_modules\discord.js\src\client\websocket'
Import trace for requested module:
./node_modules/.pnpm/[email protected]/node_modules/discord.js/src/client/websocket/WebSocketManager.js
./node_modules/.pnpm/[email protected]/node_modules/discord.js/src/index.js
./src/app/actions.ts
./src/app/page.tsx
./node_modules/.pnpm/[email protected]/node_modules/ws/lib/buffer-util.js
Module not found: Can't resolve 'bufferutil' in 'D:\projektit\discord-role\node_modules\.pnpm\[email protected]\node_modules\ws\lib'
Import trace for requested module:
./node_modules/.pnpm/[email protected]/node_modules/ws/lib/buffer-util.js
./node_modules/.pnpm/[email protected]/node_modules/ws/lib/sender.js
./node_modules/.pnpm/[email protected]/node_modules/ws/wrapper.mjs
./node_modules/.pnpm/@[email protected]/node_modules/@discordjs/ws/dist/index.mjs
./node_modules/.pnpm/[email protected]/node_modules/discord.js/src/index.js
./src/app/actions.ts
./src/app/page.tsx
./node_modules/.pnpm/[email protected]/node_modules/ws/lib/validation.js
Module not found: Can't resolve 'utf-8-validate' in 'D:\projektit\discord-role\node_modules\.pnpm\[email protected]\node_modules\ws\lib'
Import trace for requested module:
./node_modules/.pnpm/[email protected]/node_modules/ws/lib/validation.js
./node_modules/.pnpm/[email protected]/node_modules/ws/lib/sender.js
./node_modules/.pnpm/[email protected]/node_modules/ws/wrapper.mjs
./node_modules/.pnpm/@[email protected]/node_modules/@discordjs/ws/dist/index.mjs
./node_modules/.pnpm/[email protected]/node_modules/discord.js/src/index.js
./src/app/actions.ts
./src/app/page.tsx
./node_modules/.pnpm/[email protected]/node_modules/ws/lib/validation.js
Module not found: Can't resolve 'utf-8-validate' in 'D:\projektit\discord-role\node_modules\.pnpm\[email protected]\node_modules\ws\lib'
Import trace for requested module:
./node_modules/.pnpm/[email protected]/node_modules/ws/lib/validation.js
./node_modules/.pnpm/[email protected]/node_modules/ws/lib/sender.js
./node_modules/.pnpm/[email protected]/node_modules/ws/wrapper.mjs
./node_modules/.pnpm/@[email protected]/node_modules/@discordjs/ws/dist/index.mjs
./node_modules/.pnpm/[email protected]/node_modules/discord.js/src/index.js
./src/app/actions.ts
./src/app/page.tsx
- warn ./node_modules/.pnpm/[email protected]/node_modules/discord.js/src/client/websocket/WebSocketManar.js
Module not found: Can't resolve 'zlib-sync' in 'D:\projektit\discord-role\node_modules\.pnpm\[email protected]\node_modules\discord.js\src\client\websocket'
- warn ./node_modules/.pnpm/[email protected]/node_modules/discord.js/src/client/websocket/WebSocketManar.js
Module not found: Can't resolve 'zlib-sync' in 'D:\projektit\discord-role\node_modules\.pnpm\[email protected]\node_modules\discord.js\src\client\websocket'
@ruhap Did you end up finding a solution to this?
discord.JS needs a persistent server connection, so it isn’t really compatible with a website server architecture 😦
If you write an HTTP Interaction bot, that would fit into Next a little better
In this case, I’d recommend checking out this sub package:
https://www.npmjs.com/package/@discordjs/rest
npm
@discordjs/rest
The REST API for discord.js. Latest version: 1.7.1, last published: 2 months ago. Start using @discordjs/rest in your project by running
npm i @discordjs/rest. There are 228 other projects in the npm registry using @discordjs/rest.Should be what you want!
The main thing I'm wanting from Discord.js is the PermissionsBitfield so I don't have to implement that from scratch - do you know of any packages that provide just that? discord-api-types has the permission bits but doesn't provide a bitfield class to resolve a bitfield
i could add that to interaction kit pretty easily as a standalone package
sometime next week