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 !