"exports is not defined" With Next.js edge runtime functions

[va3y]

Hi there,

I'm using Next.js api, with an edge runtime. When I set up an API handler like this:

// pages/api/bot.ts
import { Bot } from "grammy/web";
import { NextResponse } from "next/server";

export const runtime = "edge";

export default async function handler() {
    new Bot("<token>");

    return new NextResponse("Success", { status: 200 });
}

When accessing the route, I get this server error:

ReferenceError: exports is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
webpack-internal:///(middleware)/./node_modules/grammy/out/web.mjs (4)
eval
webpack-internal:///(middleware)/./node_modules/grammy/out/web.mjs (4:23)

This is related how cjs modules are exported and how it works with edge. Maybe it has to do with swc bundling.

Repo with the error reproduction: https://github.com/va3y/grammy-next-edge

[va3y]

https://github.com/vercel/next.js/issues/51313 Create a next.js issue as well. But my guess is that it can be fixable on the library side as well. If there is a way to access module.exports, instead of exports

[KnorpelSenf]

Can you describe the steps that are necessary to reproduce this problem based on the repo?

Alternatively, can you explain what the service expects of the module and what grammY does, i.e. what we need to change in order to fix this?

[va3y]

My bad, please repull main branch. I've forgot to push fully.

How to get error:

1. Branch main, run npm run dev
2. Access http://localhost:3000/api/bot

[va3y]

I've noticed that on next edge runtime, they don't have exports variable accessible as global.

import { NextResponse } from "next/server";

export const runtime = "edge";

export default async function handler() {
    console.log(module); // OK
    console.log(module.exports); // OK

    console.log(exports); // ReferenceError: exports is not defined
}

My guess is that code may access it from the grammy/web somehow. Might be the bundler. I'll try to dig deeper, but I'm not that knowledgable about Deno bundling.

[KnorpelSenf]

It's an ES module. You can just look at the code inside. It uses export { Bot as Bot } syntax.

[KnorpelSenf]

Is this fixed?

[va3y]

No, still there unfortunately with 1.18.1. Right now I duck-taped it with manually importing the bundled .mjs file with 'exports' removed

[KnorpelSenf]

@PonomareVlad is this the type of challenge you would like to tackle? 🤓

[PonomareVlad]

@KnorpelSenf I drowned in urgent tasks, I really want to get back to work on grammY, but in the coming days (or weeks) I doubt that I will be free 🥲

[KnorpelSenf]

Hehe alright, good luck with the other stuff :D

This issue is currently tracked at https://github.com/vercel/next.js/issues/51313, as well. I think that the people there know a lot more about how their runtime works. @va3y, you'll need to provide a complete reproduction example for them. I will close this issue in favour of the other one.

If you end up finding out that grammY is broken and your setup is correct, and we thus have to adjust something in grammY, please open a new issue. The comment at https://github.com/vercel/next.js/issues/51313#issuecomment-1594888767 seems to imply that the web build grammY is correct, so I don't yet see what we would have to do here.

[maccman]

Is this issue completed? I'm still seeing the error.

[maccman]

Here is a basic reproduction. https://github.com/maccman/grammyjs-nextjs-edge-bug

[PonomareVlad]

Here is a basic reproduction. https://github.com/maccman/grammyjs-nextjs-edge-bug

@maccman Here is working reproduction using lazy import (But I'm not sure if it will work effectively in the production)

Also, You can check working TypeScript example for Vercel Edge Runtime

[maccman]

My guess is that something is up with the package.json configuration. I found it's quite a dark art to get it working, but for example I suspect you're missing some exports or typesVersions.

  "main": "./dist/reflect-editor.js",
  "module": "./dist/reflect-editor.js",
  "types": "./dist/reflect-editor.d.ts",
  "exports": {
    ".": {
      "types": "./dist/reflect-editor.d.ts",
      "import": "./dist/reflect-editor.js",
      "default": "./dist/reflect-editor.js"
    },
    "./lite": {
      "types": "./dist/reflect-editor-lite.d.ts",
      "import": "./dist/reflect-editor-lite.js",
      "default": "./dist/reflect-editor-lite.js"
    },
    "./reflect-editor-static": {
      "types": "./dist/reflect-editor-static.d.ts",
      "import": "./dist/reflect-editor-static.js",
      "default": "./dist/reflect-editor-static.js"
    },
    "./dist/styles.css": {
      "default": "./dist/styles.css"
    }
  },
  "typesVersions": {
    "*": {
      "lite": [
        "dist/reflect-editor-lite.d.ts"
      ],
      "reflect-editor-static": [
        "dist/reflect-editor-static.d.ts"
      ]
    }
  },

[KnorpelSenf]

Is this issue completed? I'm still seeing the error.

No. Did you read my last comment?

[PonomareVlad]

@va3y and @maccman can you test Edge build using #501 ?

{
    "dependencies": {
        "grammy": "npm:@ponomarevlad/grammy@1.19.2-next-edge"
    }
}

Also you can check this template for Next.js using /app directory

[abigpotostew]

@va3y and @maccman can you test Edge build using #501 ?

{
    "dependencies": {
        "grammy": "npm:@ponomarevlad/grammy@1.19.2-next-edge"
    }
}

Also you can check this template for Next.js using /app directory

This works for me. I tried using grammy@1.19.2 as well as the latest grammy@1.22.4 and they both fail to compile into edge functions. Example:

./pages/api/bot/index.ts
Attempted import error: 'webhookCallback' is not exported from 'grammy' (imported as 'webhookCallback').

But your version npm:@ponomarevlad/grammy@1.19.2-next-edge" works for me

[PonomareVlad]

@abigpotostew and, what about this example ?

[abigpotostew]

@abigpotostew and, what about this example ?

This example does not work for me with the latest version of grammy 1.22.4. It does work with your branch npm:@ponomarevlad/grammy@1.19.2-next-edge.