Mistake in docs. Example for Next.js App Router

[pi-kei]

Bug Report

Current Behavior

There's a mistake in docs in quirrel/docs/docs/getting-started/next-js.mdx

Input Code

Example for App Router (Next.js)
Wrong import at line 92 https://github.com/quirrel-dev/quirrel/blob/v1.14.0/docs/docs/getting-started/next-js.mdx#L92

import { emailQueue } from "app/api/queues/email"

Expected behavior/code

Must be

import { emailQueue } from "app/api/queues/email/route"

Environment

• Quirrel version: 1.14.0
• Node/npm version: 18.16.0/9.6.7

Possible Solution

Just add route in import path

[pi-kei]

It is even worse than that.
route.ts does not allow to export anything other than POST, GET etc.
So, query initialization have to be exported from another file, for example /queues/email.ts, and then reexported in route.ts as POST.

[KevinEdry]

@pi-kei We had just merged some docs changes addressing what you are referring to, see: #1141

@Skn0tt I don't see the changes in the docs, is it a CI issue?

[Skn0tt]

Looks like there were dead links that CI tripped on. I'm trying to fix it, will ping back here when the changes are live.

[Skn0tt]

Docs should be updated now. @pi-kei could you check if your issue also exists in the updated docs?

[pi-kei]

@Skn0tt Issue still exists in the updated docs.
Threre is an export that causes an error at line 46 https://github.com/quirrel-dev/quirrel/blob/main/docs/docs/getting-started/next-js.mdx#L46

export const emailQueue = Queue(

This causes an error on npm run build:

Type error: Type 'OmitWithTag<typeof import("/nextjs-example/app/api/queues/email/route"), "PUT" | "config" | "generateStaticParams" | "revalidate" | "dynamic" | "dynamicParams" | ... 8 more ... | "PATCH", "">' does not satisfy the constraint '{ [x: string]: never; }'.
  Property 'emailQueue' is incompatible with index signature.
    Type 'Queue<Payload> & NextApiHandler' is not assignable to type 'never'.

   6 | 
   7 | // Check that the entry is a valid entry
>  8 | checkFields<Diff<{
     |             ^
   9 |   GET?: Function
  10 |   HEAD?: Function
  11 |   OPTIONS?: Function

[KevinEdry]

Are you also exporting the queue as a named function POST:
export const POST = emailQueue;

If you do, whats your currently installed nextjs and quirrel versions?

[pi-kei]

@KevinEdry quirrel: 1.14.1 next: 13.4.7
Yes, there are 2 exports: POST and emailQueue. If I remove emailQueue export then error will gone, but I have to create Queue in different file to export it not as POST.

[KevinEdry]

@pi-kei can you share your code? also, are you exporting something there as default?, you should be able to export both POST and emailQueue without an issue. Nextjs route handling in the app router looks for 2 things, either an export default, or a named export (i.e POST, GET etc...) this means that in theory, Nextjs can't really know about what else you are exporting from that file because it doesn't know the constant name "emailQueue".

[pi-kei]

@KevinEdry route.ts file does not allow default export. npm run build uses next-types-plugin for webpack that checks exports in every route.ts file. You can see what exactly it allows here https://github.com/vercel/next.js/blob/canary/packages/next/src/build/webpack/plugins/next-types-plugin.ts#L57

[Skn0tt]

Interesting, didn't catch that when writing the adapter!

Have you tried placing the Queue in a separate file, and re-exporting it from the route?

[pi-kei]

@Skn0tt I placed export const emailQueue = Queue(...) in queues/email.ts (queues is a folder at the project root), then in app/api/queues/email/route.ts:

import { emailQueue } from "@/queues/email";
export { emailQueue as POST };

To enqueue I use this in my lib/notifications.ts:

import { emailQueue } from "@/queues/email";
export async function notify(...) {
  await emailQueue.enqueue(...);
}

And it is perfectly working.

[Blakeinstein]

Can someone share a working example with nextjs 13? I get logs on jobs being queued and completed but nothing from my code is executed. console.log doesn't work either, is there a way to log things?

[pi-kei]

@Blakeinstein I've had this issue. The problem was in job id. It contained unallowed characters to pass it in http header. Job was marked as complete but no request to nextjs api was made. I fixed it by hashing my job id and formatting it as hex string so it contains only digits and latin letters.