v2: Module not found: Can't resolve '@upstash/qstash/nextjs'

[boredland]

npm ls @upstash/qstash:

└── @upstash/[email protected]

After the update, my application can't find the qstash/nextjs path - when I click on it using vscode intellisense, it jumps to node_modules/@upstash/qstash/dist/nextjs.d.ts just fine. I am confused, any ideas why this may happen in a not too exotic nextjs setup?

[chronark]

Dang. I tried in a few setups and it worked. Can you try and reproduce it in a fresh project please?

[boredland]

Will try!

[boredland]

Oh, I don't need to

Repro:

1. change into examples/nextjs
2. change qstash version to 2.0.0
3. pnpm i
4. pnpm build

@boredland ➜ /workspaces/sdk-qstash-ts/examples/nextjs (main) $ pnpm run build

> [email protected] build
> next build

Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

Failed to compile.

./pages/api/serverless.ts
Module not found: Can't resolve '@upstash/qstash/nextjs'

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

./app/edge/route.ts:2:0
Module not found: Can't resolve '@upstash/qstash/nextjs'
  1 | import { NextRequest, NextResponse } from "next/server";
> 2 | import { verifySignatureEdge } from "@upstash/qstash/nextjs";
  3 | 
  4 | async function handler(req: NextRequest) {
  5 | 

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

Import trace for requested module:
./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/next-edge-app-route-loader/index.js?absolutePagePath=private-next-app-dir%2Fedge%2Froute.ts&page=%2Fedge%2Froute&appDirLoader=bmV4dC1hcHAtbG9hZGVyP25hbWU9YXBwJTJGZWRnZSUyRnJvdXRlJnBhZ2U9JTJGZWRnZSUyRnJvdXRlJnBhZ2VQYXRoPXByaXZhdGUtbmV4dC1hcHAtZGlyJTJGZWRnZSUyRnJvdXRlLnRzJmFwcERpcj0lMkZ3b3Jrc3BhY2VzJTJGc2RrLXFzdGFzaC10cyUyRmV4YW1wbGVzJTJGbmV4dGpzJTJGYXBwJmFwcFBhdGhzPSUyRmVkZ2UlMkZyb3V0ZSZwYWdlRXh0ZW5zaW9ucz10c3gmcGFnZUV4dGVuc2lvbnM9dHMmcGFnZUV4dGVuc2lvbnM9anN4JnBhZ2VFeHRlbnNpb25zPWpzJmJhc2VQYXRoPSZhc3NldFByZWZpeD0mbmV4dENvbmZpZ091dHB1dD0mcHJlZmVycmVkUmVnaW9uPSZtaWRkbGV3YXJlQ29uZmlnPWUzMCUzRCE%3D&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!

./pages/api/edge.ts:2:0
Module not found: Can't resolve '@upstash/qstash/nextjs'
  1 | import { NextRequest, NextResponse } from "next/server";
> 2 | import { verifySignatureEdge } from "@upstash/qstash/nextjs";
  3 | 
  4 | async function handler(req: NextRequest) {
  5 |   console.log(req.headers);

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

Import trace for requested module:
./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/next-edge-function-loader.js?absolutePagePath=private-next-pages%2Fapi%2Fedge.ts&page=%2Fapi%2Fedge&rootDir=%2Fworkspaces%2Fsdk-qstash-ts%2Fexamples%2Fnextjs&preferredRegion=&middlewareConfig=e30%3D!


> webpack config.resolve.alias was incorrectly overridden. https://nextjs.org/docs/messages/invalid-resolve-alias
- info Creating an optimized production build .@boredland ➜ /workspaces/sdk-qstash-ts/examples/nextjs (main) $ pnpm run build

> [email protected] build /workspaces/sdk-qstash-ts/examples/nextjs
> next build

- info Creating an optimized production build ...^[[A@boredland ➜ /workspaces/sdk-qstash-ts/examples/nextjs (main) $ pnpm build

> [email protected] build /workspaces/sdk-qstash-ts/examples/nextjs
> next build

Failed to compile.

./pages/api/serverless.ts
Module not found: Can't resolve '@upstash/qstash/nextjs'

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

./app/edge/route.ts:2:0
Module not found: Can't resolve '@upstash/qstash/nextjs'
  1 | import { NextRequest, NextResponse } from "next/server";
> 2 | import { verifySignatureEdge } from "@upstash/qstash/nextjs";
  3 | 
  4 | async function handler(req: NextRequest) {
  5 | 

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

Import trace for requested module:
./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/next-edge-app-route-loader/index.js?absolutePagePath=private-next-app-dir%2Fedge%2Froute.ts&page=%2Fedge%2Froute&appDirLoader=bmV4dC1hcHAtbG9hZGVyP25hbWU9YXBwJTJGZWRnZSUyRnJvdXRlJnBhZ2U9JTJGZWRnZSUyRnJvdXRlJnBhZ2VQYXRoPXByaXZhdGUtbmV4dC1hcHAtZGlyJTJGZWRnZSUyRnJvdXRlLnRzJmFwcERpcj0lMkZ3b3Jrc3BhY2VzJTJGc2RrLXFzdGFzaC10cyUyRmV4YW1wbGVzJTJGbmV4dGpzJTJGYXBwJmFwcFBhdGhzPSUyRmVkZ2UlMkZyb3V0ZSZwYWdlRXh0ZW5zaW9ucz10c3gmcGFnZUV4dGVuc2lvbnM9dHMmcGFnZUV4dGVuc2lvbnM9anN4JnBhZ2VFeHRlbnNpb25zPWpzJmJhc2VQYXRoPSZhc3NldFByZWZpeD0mbmV4dENvbmZpZ091dHB1dD0mcHJlZmVycmVkUmVnaW9uPSZtaWRkbGV3YXJlQ29uZmlnPWUzMCUzRCE%3D&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!

./pages/api/edge.ts:2:0
Module not found: Can't resolve '@upstash/qstash/nextjs'
  1 | import { NextRequest, NextResponse } from "next/server";
> 2 | import { verifySignatureEdge } from "@upstash/qstash/nextjs";
  3 | 
  4 | async function handler(req: NextRequest) {
  5 |   console.log(req.headers);

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

Import trace for requested module:
./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/next-edge-function-loader.js?absolutePagePath=private-next-pages%2Fapi%2Fedge.ts&page=%2Fapi%2Fedge&rootDir=%2Fworkspaces%2Fsdk-qstash-ts%2Fexamples%2Fnextjs&preferredRegion=&middlewareConfig=e30%3D!


> webpack config.resolve.alias was incorrectly overridden. https://nextjs.org/docs/messages/invalid-resolve-alias
- info Creating an optimized production build . ELIFECYCLE  Command failed with exit code 1.

[francofantini]

Hi there, I'm having the same issue.

The workaround i've found is updating to v2.1.0 and changing the import to this

import { verifySignature } from '@upstash/qstash/dist/nextjs';

[chronark]

it's so weird that the example didn't work for you I used it to verify everything works and even deployed it to vercel to double check

back to the drawing board

[chronark]

Hi there, I'm having the same issue.

The workaround i've found is updating to v2.1.0 and changing the import to this

import { verifySignature } from '@upstash/qstash/dist/nextjs';

yeah this should work, but it's ugly

[boredland]

it's so weird that the example didn't work for you I used it to verify everything works and even deployed it to vercel to double check

back to the drawing board

Just because it may help you reproduce: I ran those few commands in GitHub codespaces, so a rather virgin setup.

[chronark]

yeah that's what I tried too, freshly installed 2.1.0 and the imports work

but obviously it's broken for some people, so I'll try to break it :D

[chronark]

update: I got it to break putting on my debugging hat

[chronark]

ok I give up on the subpath things

it's much easier and also clean like this:

import { Nextjs } from "@upstash/qstash"

Nextjs.verifySignature(..)
Nextjs.verifySignatureEdge(..)

pnpm add @upstash/qstash@canary and I'll realease it later today

[boredland]

I only tried 2.0.0 - may try the newer one later today

[bastienrobert]

Looks like it's related to #47

Actually it give me an error because I'm not using next so it can't find the imported next modules:

15:17:23 │ remix │ Error: Cannot find module 'next/server'
15:17:23 │ remix │ Require stack:
15:17:23 │ remix │ - /PATH/node_modules/.pnpm/@[email protected]/node_modules/@upstash/qstash/dist/index.js

[chronark]

@bastienrobert yeah that was a mistake on my part I've reverted it in v2.1.2

import { verifySignature } from '@upstash/qstash/dist/nextjs' this still works, and I'll figure out a way to make it nicer hopfully soon :)

[elie222]

Nextjs.verifySignature doesn't seem to work.

[parallelepiped]

Bumping this issue. The above PR was never merged

[Techsetter]

Hi is import { verifySignature } from '@upstash/qstash/nextjs'; still the right way to use signature verification?

[sitoftonic]

In my case, for both imports (with and without /dist in the import path) I'm getting the following error:

error Error [ERR_MODULE_NOT_FOUND]: Cannot find module '...\node_modules\next\server' imported from ...\node_modules\@upstash\qstash\nextjs.mjs
Did you mean to import next/server.js?

I'm using @upstash/qstash v2.5.2 (latest when writing this) and next v13.4.19.

For anyone looking for a solution As I just need the verifySignature method from the library, I have just copy-pasted the source code that can be found here: https://github.com/upstash/qstash-js/blob/main/src/nextjs.ts

The code:

import { Receiver } from "@upstash/qstash";
import { NextApiHandler, NextApiRequest, NextApiResponse } from "next";

type VerifySignatureConfig = {
  currentSigningKey?: string;
  nextSigningKey?: string;
  /**
   * The url of this api route, including the protocol.
   *
   * If you omit this, the url will be automatically determined by checking the `VERCEL_URL` env variable and assuming `https`
   */
  url?: string;
  /**
   * Number of seconds to tolerate when checking `nbf` and `exp` claims, to deal with small clock differences among different servers
   *
   * @default 0
   */
  clockTolerance?: number;
};

/**
 * TODO: This function is copy-pasted from: https://github.com/upstash/qstash-js/blob/main/src/nextjs.ts
 * This should be removed once import from the package is stable and published.
 * More info here: https://github.com/upstash/qstash-js/issues/44
 * @param handler 
 * @param config 
 * @returns 
 */
export function verifySignature(
  handler: NextApiHandler,
  config?: VerifySignatureConfig
): NextApiHandler {
  const currentSigningKey =
    config?.currentSigningKey ?? process.env.QSTASH_CURRENT_SIGNING_KEY;
  if (!currentSigningKey) {
    throw new Error(
      "currentSigningKey is required, either in the config or as env variable QSTASH_CURRENT_SIGNING_KEY"
    );
  }
  const nextSigningKey =
    config?.nextSigningKey ?? process.env.QSTASH_NEXT_SIGNING_KEY;
  if (!nextSigningKey) {
    throw new Error(
      "nextSigningKey is required, either in the config or as env variable QSTASH_NEXT_SIGNING_KEY"
    );
  }
  const receiver = new Receiver({
    currentSigningKey,
    nextSigningKey,
  });

  return async (request: NextApiRequest, response: NextApiResponse) => {
    // @ts-ignore This can throw errors during vercel build
    const signature = request.headers["upstash-signature"];
    if (!signature) {
      response.status(400);
      response.send("`Upstash-Signature` header is missing");
      response.end();
      return;
    }
    if (typeof signature !== "string") {
      throw new TypeError("`Upstash-Signature` header is not a string");
    }

    const chunks = [];
    for await (const chunk of request) {
      chunks.push(typeof chunk === "string" ? Buffer.from(chunk) : chunk);
    }
    const body = Buffer.concat(chunks).toString("utf8");

    const isValid = await receiver.verify({
      signature,
      body,
      clockTolerance: config?.clockTolerance,
    });
    if (!isValid) {
      response.status(400);
      response.send("Invalid signature");
      response.end();
      return;
    }

    try {
      request.body = (
        request.headers["content-type"] === "application/json"
          ? JSON.parse(body)
          : body
      ) as string;
    } catch {
      request.body = body;
    }

    return handler(request, response);
  };
}

[ogzhanolguncu]

@sitoftonic Weird. I'll check the SDK and make sure it doesn't require copy-paste. I tested edge and serverless everything was fine I actually deployed and check them myself. Maybe the pages directory causing this.

Also can add these to your tsconfig in my case they were causing the issue.

    "module": "esnext",
    "moduleResolution": "bundler"

[boredland]

In my case, for both imports (with and without /dist in the import path) I'm getting the following error:

Ya, having the same here with pages directory on the latest version.

[ogzhanolguncu]

@boredland Care to share a reproduction link?

[karol-spaceport]

I can confirm I'm having the same issue when upgrading from 2.5.0 to 2.5.4 and a workaround of copying https://github.com/upstash/qstash-js/blob/main/src/nextjs.ts worked for me as well. I can't share repro in repo as it's not open sourced but I do have an error if that helps:

unhandledRejection Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/username/myrepo/node_modules/.pnpm/node_modules/next/server' imported from /Users/username/myrepo/node_modules/.pnpm/@[email protected]/node_modules/@upstash/qstash/nextjs.mjs
Did you mean to import [email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/next/server.js?
    at new NodeError (node:internal/errors:405:5)
    at finalizeResolution (node:internal/modules/esm/resolve:327:11)
    at moduleResolve (node:internal/modules/esm/resolve:980:10)
    at defaultResolve (node:internal/modules/esm/resolve:1193:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:404:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:373:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:250:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:39)
    at link (node:internal/modules/esm/module_job:75:36) {
  type: 'Error',
  url: 'file:///Users/username/myrepo/node_modules/.pnpm/node_modules/next/server',
  code: 'ERR_MODULE_NOT_FOUND'
}

[elie222]

Same issue here

[ogzhanolguncu]

Okay. This issue will be fixed ASAP.

[ogzhanolguncu]

Should be fixed here: https://github.com/upstash/qstash-js/releases/tag/v2.5.5. I personally tested both app and pages to make sure they are good. Lemme know if issue still persists.

[karol-spaceport]

Should be fixed here: https://github.com/upstash/qstash-js/releases/tag/v2.5.5. I personally tested both app and pages to make sure they are good. Lemme know if issue still persists.

Thank you, I can confirm this resolved my build issues

[iam-kevin]

I have some what of a similar problem when importing the regular from import { Client } from '@upstash/qstash'. This is the get this error:

Error: Cannot find module '/<app>/node_modules/@upstash/qstash/dist/base/index.js'
    at createEsmNotFoundErr (node:internal/modules/cjs/loader:1181:15)
    at finalizeEsmResolution (node:internal/modules/cjs/loader:1169:15)
    at resolveExports (node:internal/modules/cjs/loader:591:14)
    at Module._findPath (node:internal/modules/cjs/loader:668:31)
    at Module._resolveFilename (node:internal/modules/cjs/loader:1130:27)
    at Module._load (node:internal/modules/cjs/loader:985:27)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at require (node:internal/modules/helpers:176:18)
    at Object.<anonymous> (/<app>/dist/lib/client/misc.js:1:600)
    at Module._compile (node:internal/modules/cjs/loader:1376:14) {
  code: 'MODULE_NOT_FOUND',
  path: '/<app>/node_modules/@upstash/qstash/package.json'
}

Since I'm using pnpm, I figured maybe .pnpm hoisting might be the issue, I tried include ways around that (like adding public-hoist-pattern[]=@upstash/qstash in the .npmrc), doesn't seem to work. I also tried using yarn, but getting the same error

I hope this helps in someway.

---

Ran on:

• [email protected]
• [email protected]
• [email protected]
• @upstash/[email protected]

[iam-kevin]

Should be fixed here: https://github.com/upstash/qstash-js/releases/tag/v2.5.5. I personally tested both app and pages to make sure they are good. Lemme know if issue still persists.

Thank you, I can confirm this resolved my build issues

Same for me.

[willdspd]

I can confirm I'm having the same issue when upgrading from 2.5.0 to 2.5.4 and a workaround of copying https://github.com/upstash/qstash-js/blob/main/src/nextjs.ts worked for me as well. I can't share repro in repo as it's not open sourced but I do have an error if that helps:

unhandledRejection Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/username/myrepo/node_modules/.pnpm/node_modules/next/server' imported from /Users/username/myrepo/node_modules/.pnpm/@[email protected]/node_modules/@upstash/qstash/nextjs.mjs
Did you mean to import [email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/next/server.js?
    at new NodeError (node:internal/errors:405:5)
    at finalizeResolution (node:internal/modules/esm/resolve:327:11)
    at moduleResolve (node:internal/modules/esm/resolve:980:10)
    at defaultResolve (node:internal/modules/esm/resolve:1193:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:404:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:373:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:250:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:39)
    at link (node:internal/modules/esm/module_job:75:36) {
  type: 'Error',
  url: 'file:///Users/username/myrepo/node_modules/.pnpm/node_modules/next/server',
  code: 'ERR_MODULE_NOT_FOUND'
}

I think this issue needs to be reopened as I'm getting almost exactly this error with @upstash/qstash version "^2.7.12" and pages router with next version "13.3.0":

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/username/Desktop/myrepo/node_modules/next/server' imported from /Users/username/Desktop/myrepo/node_modules/.pnpm/@[email protected]/node_modules/@upstash/qstash/nextjs.mjs
Did you mean to import "next/server.js"?
    at finalizeResolution (node:internal/modules/esm/resolve:265:11)
    at moduleResolve (node:internal/modules/esm/resolve:933:10)
    at defaultResolve (node:internal/modules/esm/resolve:1157:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:383:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:352:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:227:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:87:39)
    at link (node:internal/modules/esm/module_job:86:36) {
  code: 'ERR_MODULE_NOT_FOUND',
  url: 'file:///Users/username/Desktop/myrepo/node_modules/next/server'
}

For context, I'm trying to import { servePagesRouter } from '@upstash/qstash/nextjs' to use QStash's new workflow feature.

@ogzhanolguncu You mentioned using "moduleResolution": "bundler"? I'm using an NX monorepo that I think enforces "moduleResolution": "Node". I'm not familiar with TS settings so not sure if this is relevant?

[vacom]

import { verifySignature } from '@upstash/qstash/dist/nextjs'

I'm also trying to use the new Workflow with version "@upstash/qstash": "^2.7.12", in Pages Router and I'm having the same problem

[ytkimirti]

Hey @vacom and @willdspd

Sorry for the inconvenience. When we changed the export fields, this issue appeared again. We fixed it in the 2.7.13 release (#200). It is essentially something with importing nextjs from qstash package and it has something to do with the esm import of next. But we couldn't understand it enough so we removed the next import altogether. It should be ok now. Can you try the latest version?