Attempted import error: 'Replay' is not exported from '@sentry/nextjs' (imported as 'Sentry').

[curiousercreative]

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

Framework Version

Next.js 14.0.4

Link to Sentry event

No response

SDK Setup

import { CaptureConsole as CaptureConsoleIntegration } from '@sentry/integrations'
import * as Sentry from '@sentry/nextjs'

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  environment: process.env.NEXT_PUBLIC_SENTRY_ENV || process.env.NEXT_PUBLIC_APP_ENV,
  tracesSampleRate: Number(process.env.NEXT_PUBLIC_SENTRY_TRACES_SAMPLE_RATE) || 0,
  integrations: [
    new CaptureConsoleIntegration({
      // array of methods that should be captured
      // defaults to ['log', 'info', 'warn', 'error', 'debug', 'assert']
      levels: [ 'error' ],
    }),
    new Sentry.Replay({
      maskAllText: false,
      blockAllMedia: false,
    }),
  ],
  replaysSessionSampleRate: 0,
  replaysOnErrorSampleRate: 1.0, // overrides replaysSessionSampleRate when an error occurs
})

Steps to Reproduce

1. pnpm build

Expected Result

no errors

Actual Result

 ⚠ Compiled with warnings

./src/lib/sentry/index.ts
Attempted import error: 'Replay' is not exported from '@sentry/nextjs' (imported as 'Sentry').

Import trace for requested module:
./src/lib/sentry/index.ts
./src/app/global-error.tsx

./src/lib/sentry/index.ts
Attempted import error: 'Replay' is not exported from '@sentry/nextjs' (imported as 'Sentry').

Import trace for requested module:
./src/lib/sentry/index.ts
./src/app/layout.tsx

./src/lib/sentry/index.ts
Attempted import error: 'Replay' is not exported from '@sentry/nextjs' (imported as 'Sentry').

Import trace for requested module:
./src/lib/sentry/index.ts
./src/app/api/reset-password/route.ts

[Lms24]

Hi @curiousercreative any chance that you're trying to import Replay into your server-side Sentry SDK setup (sentry.server.config.js|ts)? This is not going to work as Replay can only be added to the client-side SDK.

[curiousercreative]

@Lms24 yeah, that seems to be what's happening. I have an internal wrapper library around @sentry/nextjs that is being imported into the client, server, and edge config files. It exports three functions that reference private module data to reduce configuration duplication. So it's logging a compilation warning/error about the client config function despite it not being invoked in server-side code.

[Lms24]

I see, in this case, I'd argue that this is not a bug in our SDK. I understand that it's more convenient to have some configuration for both, client and server (or edge) in one place but this is beyond the SDK package's control.
I'm not sure how your library works but you might want to look into setting entry points in your package.json similarly to how our NextJS SDK does it, to import the correct modules from your package for client and server.

Going to close this issue in the meantime. Please let me know if you think it should be reopened, thank you!