Can't use withSentryConfig because it breaks NextJS

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.70.0

Framework Version

@sentry/nextjs 7.70.0

Link to Sentry event

No response

SDK Setup

next.config

/** @type {import('next').NextConfig} */
const { withSentryConfig } = require('@sentry/nextjs')

const nextConfig = {
  reactStrictMode: true,
  serverRuntimeConfig: {
    buildEnv: process.env.BUILD_ENV
  },
  publicRuntimeConfig: {
    buildEnv: process.env.BUILD_ENV
  },
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '**'
      }
    ]
  }
}

module.exports = nextConfig

module.exports = withSentryConfig(module.exports, { silent: true })

sentry.client.config.js

import * as Sentry from '@sentry/nextjs'

const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN
const SENTRY_ENVIRONMENT = process.env.SENTRY_ENVIRONMENT || process.env.ENVIRONMENT

Sentry.init({
  dsn: SENTRY_DSN,
  environment: SENTRY_ENVIRONMENT,
  tracesSampleRate: 0.1,
  debug: false,
  replaysOnErrorSampleRate: 0.1,
  replaysSessionSampleRate: 0.1,
  integrations: [
    new Sentry.Replay({
      maskAllText: true,
      blockAllMedia: true
    })
  ]
})

Steps to Reproduce

Run next dev
Console throws an error (see picture below)

Expected Result

Not to break the build

Actual Result

Some comments:

This error is fixed with version 7.20.1 the problem is that that version is imcompatible with my current Next version next@13.5.1
If I remove withSentryConfig everything works, but there is some problem with withSentryConfig wrapping the NextJS config

Hi, thanks for writing in. I am also using next auth in my sideproject in combination with the SDK and I cannot reproduce this. Would you mind sharing a small reproduction example (git repo we can clone or stackblitz or similar) so we an effectively debug this? Thanks!

Getting the same problem with Next v14 and Sentry SDK 7.77.0:

export { _asyncNullishCoalesce } from './_asyncNullishCoalesce.js';
^^^^^^

SyntaxError: Unexpected token 'export'

@Deliaz

@Deliaz Can you please open a separate issue with reproduction examples, as this does not seem to be the same error as described in the original issue. Thanks!

@lforst

Thanks guys! @lforst let us know if you have any update on the fix.

The fix was released in version 7.78.0.

Hello, sorry guys, I updated next, next-auth and @sentry/nextjs to its latest version and error remain exactly the same:
"@sentry/nextjs": "^7.78.0"
"next": "^14.0.1"
"next-auth": "^4.24.4"

next dev -p ${PORT:=3001}

▲ Next.js 14.0.1

Local: http://localhost:3001
Environments: .env

warn - In order to be able to deminify errors, @sentry/nextjs creates sourcemaps and uploads them to the Sentry server. Depending on your deployment setup, this means your original code may be visible in browser devtools in production. To prevent this, set hideSourceMaps to true in the sentry options in your next.config.js. To disable this warning without changing sourcemap behavior, set hideSourceMaps to false. (In @sentry/nextjs version 8.0.0 and beyond, this option will default to true.) See https://webpack.js.org/configuration/devtool/ and https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#use-hidden-source-map for more information.

✓ Ready in 3.4s
○ Compiling /login ...
✓ Compiled /login in 11.3s (794 modules)
⚠ Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload
○ Compiling /api/auth/[...nextauth] ...
✓ Compiled /api/auth/[...nextauth] in 2.6s (848 modules)
⨯ TypeError: Cannot read properties of undefined (reading 'type')
at assertConfig (/app/node_modules/next-auth/core/lib/assert.js:69:18)
at AuthHandler (/app/node_modules/next-auth/core/index.js:77:52)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async NextAuthApiHandler (/app/node_modules/next-auth/next/index.js:22:19)
at async NextAuth._args$ (/app/node_modules/next-auth/next/index.js:108:14)
at async /app/node_modules/@sentry/nextjs/cjs/common/wrapApiHandlerWithSentry.js:153:35 {
page: '/api/auth/[...nextauth]'
}
⚠ Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload
⨯ TypeError: Cannot read properties of undefined (reading 'type')
at assertConfig (/app/node_modules/next-auth/core/lib/assert.js:69:18)
at AuthHandler (/app/node_modules/next-auth/core/index.js:77:52)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async NextAuthApiHandler (/app/node_modules/next-auth/next/index.js:22:19)
at async NextAuth._args$ (/app/node_modules/next-auth/next/index.js:108:14)
at async /app/node_modules/@sentry/nextjs/cjs/common/wrapApiHandlerWithSentry.js:153:35 {
page: '/api/auth/[...nextauth]'

@leonardopiperai

@leonardopiperai These errors don't look the same. Can you please open a new issue and provide reproduction? Thanks!

@lforst

@lforst sorry I didn't paste the whole error, it is exactly the same.
I found out that on [...nextauth].js I'm importing each provider object on a different file, if I remove those imports the error is gone.
Something between that and withSentryConfig is producing the error, super hard to realise what is going on.

[...nextauth].js

import NextAuth from 'next-auth'
import hubspotProvider from './providers/hubspotProvider'

export default NextAuth({
  providers: [
    hubspotProvider
  ],
  pages: {
    signIn: '/login',
    error: '/login'
  },
  secret: process.env.NEXTAUTH_SECRET,
  debug: false,
  session: {
    maxAge: 30 * 24 * 60 * 60, // 30 days
    updateAge: 24 * 60 * 60 // 24 hours
  },
  jwt: {
    maxAge: 60 * 60 * 24 * 30
  },
  callbacks: {
    async signIn () {
      return true
    },
    async redirect ({ baseUrl }) {
      return baseUrl
    },
    async session ({
      session,
      token
    }) {
      session.user = {
        ...session.user,
        ...token.user
      }
      session.accessToken = token.accessToken

      return session
    },
    async jwt ({
      token,
      account,
      user
    }) {
      if (account?.access_token) {
        token.accessToken = account.access_token
        token.tokenType = account.token_type
        token.refreshToken = account.refresh_token
        token.user = user
      }
      return token
    }
  }
})

hubspotProvider.js

import getToken from '../../../../lib/salesPerson/getToken'
import getInfo from '../../../../lib/salesPerson/getInfo'
import { HUBSPOT, PROVIDER_TYPE } from '../../../../constants'

const hubspotProvider = {
  id: HUBSPOT.id,
  name: HUBSPOT.name,
  type: HUBSPOT.type,
  clientId: process.env.HUBSPOT_ID,
  clientSecret: process.env.HUBSPOT_SECRET,
  authorization: {
    url: HUBSPOT.authorization,
    params: {
      scope: HUBSPOT.scope,
      redirect_uri: HUBSPOT.redirectUrl,
      client_id: process.env.HUBSPOT_ID
    }
  },
  client: { token_endpoint_auth_method: HUBSPOT.client_secret },
  token: {
    async request (context) {
      context.tokens = await getToken({
        code: context.params.code,
        provider: PROVIDER_TYPE.HUBSPOT
      })
      return context
    }
  },
  userinfo: {
    async request (context) {
      try {
        const userInfo = await getInfo(context.tokens, PROVIDER_TYPE.HUBSPOT)
        return userInfo
      } catch (error) {
        return error
      }
    }
  },
  profile (profile) {
    return profile
  }
}

export default hubspotProvider

error:

[next-auth][error][CLIENT_FETCH_ERROR]
https://next-auth.js.org/errors#client_fetch_error Unexpected token < in JSON at position 0 {
  error: {
    message: 'Unexpected token < in JSON at position 0',
    stack: 'SyntaxError: Unexpected token < in JSON at position 0\n' +
      '    at JSON.parse (<anonymous>)\n' +
      '    at parseJSONFromBytes (node:internal/deps/undici/undici:4553:19)\n' +
      '    at successSteps (node:internal/deps/undici/undici:4527:27)\n' +
      '    at fullyReadBody (node:internal/deps/undici/undici:1307:9)\n' +
      '    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)\n' +
      '    at async specConsumeBody (node:internal/deps/undici/undici:4536:7)',
    name: 'SyntaxError'
  },
  url: 'http://localhost:3001/api/auth/providers',
  message: 'Unexpected token < in JSON at position 0'
}
Image with src "/images/gradient.svg" has legacy prop "layout". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
Image with src "/images/gradient.svg" has legacy prop "objectFit". Did you forget to run the codemod?
Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
 ⨯ TypeError: Cannot read properties of undefined (reading 'type')
    at assertConfig (/app/node_modules/next-auth/core/lib/assert.js:69:18)
    at AuthHandler (/app/node_modules/next-auth/core/index.js:77:52)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async NextAuthApiHandler (/app/node_modules/next-auth/next/index.js:22:19)
    at async NextAuth._args$ (/app/node_modules/next-auth/next/index.js:108:14)
    at async /app/node_modules/@sentry/nextjs/cjs/common/wrapApiHandlerWithSentry.js:153:35 {
  page: '/api/auth/[...nextauth]'
}

@leonardopiperai

@leonardopiperai Please provide a small reproduction example we can run locally to reproduce this error. Thanks!

@lforst

@lforst Sure, I invited you to a repo where the issue is reproducible.
Thanks!

@leonardopiperai

@leonardopiperai Ok this is a bit unlucky but also kinda an inaccuracy on your part. Every file you put under /pages/api will be turned into an API route - and Sentry will auto wrap all api routes. In your case you put your credentialProviders under the /pages/api/auth/providers folder which is gonna end up as an API route. You very likely do not want this and you should put that file somewhere else in your project. You can verify this by looking at the Next.js build output:

Route (pages)                                Size     First Load JS
┌ ○ /                                        417 B          88.8 kB
├   └ css/e7d3bab42d9af29d.css               613 B
├   /_app                                    0 B            88.4 kB
├ ○ /404                                     182 B          88.5 kB
├ λ /api/auth/[...nextauth]                  0 B            88.4 kB
├ λ /api/auth/providers/credentialProviders  0 B            88.4 kB <<----- This one
├ λ /api/hello                               0 B            88.4 kB
├ λ /api/sentry-example-api                  0 B            88.4 kB
└ ○ /sentry-example-page                     6.73 kB        95.1 kB
+ First Load JS shared by all                88.4 kB
  ├ chunks/framework-66d32731bdd20e83.js     45.2 kB
  ├ chunks/main-8c2fcf961f1eeec3.js          31.8 kB
  ├ chunks/pages/_app-a96ccf5c4ceb0abb.js    10.4 kB
  └ chunks/webpack-94547de1949c56d7.js       950 B

ƒ Middleware                                 61.3 kB

○  (Static)   prerendered as static content
λ  (Dynamic)  server-rendered on demand using Node.js

It is very unlikely that we can or will fix this, since it is mostly due to user error.

@lforst

@lforst Okey.. I see, yes, this looks like an unfortunate mix between a bad auth config and withSentryConfig wrapper. I'm going to keep trying to integrate Sentry by fixing the next auth.
Thanks man for taking a look into!

Navigation Menu

Repository navigation

Can't use withSentryConfig because it breaks NextJS #9450

Is there an existing issue for this?

How do you use Sentry?

Which SDK are you using?

SDK Version

Framework Version

Link to Sentry event

SDK Setup

Steps to Reproduce

Expected Result

Actual Result

37 remaining items

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Can't use withSentryConfig because it breaks NextJS #9450

Description

Is there an existing issue for this?

How do you use Sentry?

Which SDK are you using?

SDK Version

Framework Version

Link to Sentry event

SDK Setup

Steps to Reproduce

Expected Result

Actual Result

Activity

lforst commented on Nov 3, 2023

Deliaz commented on Nov 4, 2023

lforst commented on Nov 4, 2023

37 remaining items

leonardopiperai commented on Nov 6, 2023

Lms24 commented on Nov 8, 2023

leonardopiperai commented on Nov 9, 2023

lforst commented on Nov 9, 2023

leonardopiperai commented on Nov 9, 2023

lforst commented on Nov 9, 2023

leonardopiperai commented on Nov 12, 2023

lforst commented on Nov 13, 2023

leonardopiperai commented on Nov 13, 2023

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions