TypeError when running Next.js app with middleware and latest @sentry/nextjs package

[facundocastello]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/nextjs

SDK Version

7.56.0

Framework Version

18.2.0

NextJs Version

13.3.0

Link to Sentry event

https://the-issue.sentry.io/issues/4280470356/events/7bda08795e7f48a1aad62e56be27ad80/

SDK Setup

sentry.edge.config.ts

import * as Sentry from '@sentry/nextjs'

Sentry.init({
  dsn: SENTRY_DNS,
  tracesSampleRate: 1,
  debug: false,
})

sentry.server.config.ts

import * as Sentry from '@sentry/nextjs'
Sentry.init({
  dsn: SENTRY_DNS,
  tracesSampleRate: 1,
  debug: false,
})

sentry.client.config.ts

import * as Sentry from '@sentry/nextjs'
Sentry.init({
  dsn: SENTRY_DNS,
  tracesSampleRate: 1,
  debug: false,
  replaysOnErrorSampleRate: 1.0,
  replaysSessionSampleRate: 0.1,
  integrations: [
    new Sentry.Replay({
      maskAllText: true,
      blockAllMedia: true,
    }),
  ],
})

Steps to Reproduce

1. Create a middleware.ts file in any nextjs project (npx create-next-app@latest) with a simple middleware handler:

export default async function middleware() {
  return NextResponse.next()
}

2. run sentry wizard to initialize npx @sentry/wizard -i nextjs
3. run yarn dev
4. enter to any page

This same error happened in this issue #6858 but the fix they added seems not to work on my side.

Expected Result

Enter to the page without any error.

Actual Result

error - sentry-wrapper-module (33:63) @ eval
error - Error [TypeError]: _sentry_nextjs__WEBPACK_IMPORTED_MODULE_1__.wrapMiddlewareWithSentry is not a function
    at eval (webpack-internal:///./middleware.ts:86:108)
    at Object../middleware.ts (/Users/facundocastello/projects/deckhand/.next/server/pages/_app.js:22:1)
    at __webpack_require__ (/Users/facundocastello/projects/deckhand/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./helpers/tenant.ts:12:69)
    at Object../helpers/tenant.ts (/Users/facundocastello/projects/deckhand/.next/server/pages/_app.js:164:1)
    at __webpack_require__ (/Users/facundocastello/projects/deckhand/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./contexts/CampaignContext.tsx:9:73)
    at Object../contexts/CampaignContext.tsx (/Users/facundocastello/projects/deckhand/.next/server/pages/_app.js:87:1)
    at __webpack_require__ (/Users/facundocastello/projects/deckhand/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./pages/_app.tsx:18:83)
    at Function.__webpack_require__.a (/Users/facundocastello/projects/deckhand/.next/server/webpack-runtime.js:97:13)
    at eval (webpack-internal:///./pages/_app.tsx:1:21)
    at Object../pages/_app.tsx (/Users/facundocastello/projects/deckhand/.next/server/pages/_app.js:33:1)
    at __webpack_require__ (/Users/facundocastello/projects/deckhand/.next/server/webpack-runtime.js:33:42)
    at __webpack_exec__ (/Users/facundocastello/projects/deckhand/.next/server/pages/_app.js:470:39)
    at /Users/facundocastello/projects/deckhand/.next/server/pages/_app.js:471:75
    at Object.<anonymous> (/Users/facundocastello/projects/deckhand/.next/server/pages/_app.js:474:3)
    at Module._compile (node:internal/modules/cjs/loader:1126:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
    at Module.load (node:internal/modules/cjs/loader:1004:32)
    at Function.Module._load (node:internal/modules/cjs/loader:839:12)
    at Module.require (node:internal/modules/cjs/loader:1028:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.requirePage (/Users/facundocastello/projects/deckhand/node_modules/next/dist/server/require.js:134:12)
    at /Users/facundocastello/projects/deckhand/node_modules/next/dist/server/load-components.js:48:54
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Promise.all (index 1)
    at async Object.loadComponentsImpl [as loadComponents] (/Users/facundocastello/projects/deckhand/node_modules/next/dist/server/load-components.js:46:33)
    at async DevServer.findPageComponentsImpl (/Users/facundocastello/projects/deckhand/node_modules/next/dist/server/next-server.js:667:36) {
  digest: undefined
}
  31 |   ? Sentry.wrapMiddlewareWithSentry(userProvidedNamedHandler)
  32 |   : undefined;
> 33 | const middlewareWrapperTemplate = userProvidedDefaultHandler ? Sentry.wrapMiddlewareWithSentry(userProvidedDefaultHandler) : undefined;
     |                                                               ^
  34 | 
  35 | export { middlewareWrapperTemplate as default, middleware };
  36 | 

I'm getting this exact error also when I deploy it to vercel, so it's not just a local error.

[lforst]

Hey, thanks for raising this. Could you provide a reproduction example? I can't reproduce this in my test app. Thanks!

[facundocastello]

Sorry for not sending a complete reproduction example.

I found the problem. My middleware was something like this:

export const MAIN_DOMAIN = "http://maindomain.com"

export default async function middleware() {
  return NextResponse.next()
}

and I was importing it in another file:

import { MAIN_DOMAIN } from '../middleware'

it seems like importing anything from the middleware causes this error.

I hope this helps anybody else 🙏🏽 .

Thanks!

[Royal-lobster]

Sorry for not sending a complete reproduction example.

I found the problem. My middleware was something like this:

export const MAIN_DOMAIN = "http://maindomain.com"

export default async function middleware() {
  return NextResponse.next()
}

and I was importing it in another file:

import { MAIN_DOMAIN } from '../middleware'

it seems like importing anything from the middleware causes this error.

I hope this helps anybody else 🙏🏽 .

Thanks!

Found this after 5hrs of debugging 🤧 Thanks a lot !

[lforst]

Ah, I finally see the problem. We only export the middleware wrapper from the edge runtime part of the SDK. When you import something from the middleware file that uses the node runtime the middleware wrapper is undefined. We need to fix this.

Thanks for raising this!