Issue running Vercel Edge Functions example from README. SlackApp is not returning challenge from API Verification + More

[BrianTsGit]

Hi there, I am running into a few issues using the SlackApp object in a NextJS project using App Router. I might be missing some configurations but as I follow the example in the README for the Vercel Edge Functions I run into some problems you may be able to shed some light on.

package.json:

{
  "name": "ask-ai-slackbot",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@slack/web-api": "^7.0.4",
    "ai": "^3.0.24",
    "next": "14.2.2",
    "openai": "^4.38.1",
    "react": "^18",
    "react-dom": "^18",
    "slack-edge": "0.11.0"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.2",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

Code Snippet 1:

// src/app/api/slack/route.ts
import type { NextFetchEvent, NextRequest } from 'next/server';
import { SlackApp } from 'slack-edge';

export const config = {
  runtime: 'edge',
};
export const dynamic  =  'force-dynamic';

const app = new SlackApp({
  env: {
    SLACK_SIGNING_SECRET: process.env.SLACK_SIGNING_SECRET!,
    SLACK_BOT_TOKEN: process.env.SLACK_BOT_TOKEN!,
    SLACK_LOGGING_LEVEL: 'DEBUG',
  },
});

app.event('app_mention', async ({ context, payload }) => {
  console.log(context, payload);
});

app.event('message', async ({ context, payload }) => {
  console.log(context, payload);
});

export  async  function  POST(req:  NextRequest, context: NextFetchEvent) {
  return  await  app.run(req, context);
}

When challenging this endpoint api/slack from Slack's Event Subscription there is no successful response to verify the endpoint. Is there any missing configuration to enable the SlackApp to return the challenge? I can see the app is returning a 401 response to the challenge request.

In an attempt to get pass the verification step I manually return the challenge in the following updated snippet. However, then I run into an error originating from the slack-edge library when hitting the endpoint from an app mention in Slack.

Code Snippet 2:

// src/app/api/slack/route.ts
import type { NextFetchEvent, NextRequest } from 'next/server';
import { SlackApp } from 'slack-edge';

export const config = {
  runtime: 'edge',
};
export const dynamic  =  'force-dynamic';

const app = new SlackApp({
  env: {
    SLACK_SIGNING_SECRET: process.env.SLACK_SIGNING_SECRET!,
    SLACK_BOT_TOKEN: process.env.SLACK_BOT_TOKEN!,
    SLACK_LOGGING_LEVEL: 'DEBUG',
  },
});

app.event('app_mention', async ({ context, payload }) => {
  console.log(context, payload);
});

app.event('message', async ({ context, payload }) => {
  console.log(context, payload);
});

export  async  function  POST(req:  NextRequest, context: NextFetchEvent) {
  // Manually return challenge start
  const blobRequestBody = await req.blob();
  const rawBody = await blobRequestBody.text();
  const body = JSON.parse(rawBody);
  const { type: requestType } = body;

  if (requestType === 'url_verification') {
    return new Response(body.challenge, { status: 200 });
  }
  // Manually return challenge end

  return  await  app.run(req, context);
}

Error from Code Snippet 2:

POST /api/slack 500 in 50ms
 ⨯ TypeError: Body is unusable
    at specConsumeBody (node:internal/deps/undici/undici:4712:15)
    at NextRequest.blob (node:internal/deps/undici/undici:4595:18)
    at SlackApp.handleEventRequest (webpack-internal:///(rsc)/./node_modules/slack-edge/dist/app.js:477:47)
    at SlackApp.run (webpack-internal:///(rsc)/./node_modules/slack-edge/dist/app.js:441:27)
    at POST (webpack-internal:///(rsc)/./src/app/api/slack/route.ts:37:22)

It appears SlackApp.run is having issues calling .blob on the NextRequest. This might be because I already called .blob on the request during my manual challenge verification step. But without that I can not reach the point in the route handler to run SlackApp.run.

Perhaps I am missing something here or configured something incorrectly. Thank you for any feedback!

[screengroove]

@BrianTsGit / @seratch I am seeing similar issues:

TypeError: request.blob is not a function
    at SlackApp.handleEventRequest (/Users/patrickiwanicki/Repos/ask-ai-slackbot/node_modules/slack-edge/src/app.ts:750:43)
    at SlackApp.run (/Users/patrickiwanicki/Repos/ask-ai-slackbot/node_modules/slack-edge/src/app.ts:705:23)
    at handler (/Users/patrickiwanicki/Repos/ask-ai-slackbot/api/edge.ts:20:20)
    at Server.<anonymous> (file:///Users/patrickiwanicki/.nvm/versions/node/v20.10.0/lib/node_modules/vercel/node_modules/@vercel/node/dist/dev-server.mjs:1027:12)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)

[seratch]

@BrianTsGit

I can see the app is returning a 401 response to the challenge request.

This means your app in prod does not have a valid signing secret in its env variables. Please double-check if you've set a correct string for the app. I'd suggest using vercel env pull command for downloading the currently set ones.

The "Code Snippet 2" never works. Please stop doing it. When you configure your vercel env correctly, the code snippet on README should work without any changes. Grab the latest credentials again and run the following commands to set them:

vercel env add SLACK_BOT_TOKEN production
vercel env add SLACK_SIGNING_SECRET production

I've confirmed that the latest Next.js and the code snippet on README are compatible and while doing the check, I've observed there is a certain delay on the Vercel platform isde. When you have issues with loading env data, waiting for a while (say, minutes?) may help.

I did confirm that there is no issue with the code on README:

Give another try without any code changes! I hope you'll figure the cause of your error out soon

[seratch]

@screengroove Your situation looks a bit different. if you're experiencing the error on your local machine (or somewhere outside of the Vercel prod infra), it might be due to some errors opn your settings, outdated runtime/module etc.

Since I don't have the bandwidth for general Vercel questions (this is my weekend project plus I am not a Vercel employee), I'd like to avoid back and forth comments here (except the issue directly caused by this library). Ask questions on their forum for further supports.

[BrianTsGit]

Hey @seratch, it did end up being an issue with env vars. Thank you for that, the demo code is running as expected now!