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!

[curiousercreative]

@Lms24 that's understandable. Only direction I'd ask to explore on Sentry's end is to export a stub that throws on invocation. So nextjs server and edge entry points would export Replay as a stub, but invocation would provide a clear error message that it's only available on the client. This should resolve the compilation error and yield better developer experience for others that are compiling or worse invoking outside of nextjs client. I'd be happy to submit a PR, but perhaps you've previously decided against this type of approach across the SDKs

[Lms24]

I understand your use case and it's been brought up before:

• Remix "captureRemixServerException" is not exported by "node_modules/@sentry/remix/esm/index.client.js" #9594
• EsLint rule that doesn't play nicely: eslint(import/namespace): error 'BrowserTracing' not found in imported namespace 'Sentry' #9728

The problem here is that providing stubs is a little more complicated if we want to do it right. This wouldn't only involve shimming integrations but a lot of other functions that are only available on the browser or node side. Sure, Replay and BrowserTracing are probably the most prominent items where people run into this issue but there are other exports and they vary from SDK to SDK (e.g. Remix error boundary, SvelteKit wrappers, Astro middleware, etc).

If we provide stubs, I'd strongly argue that they shouldn't throw (our SDKs should never throw) but log a warning/error instead. We're still a bit undecided though if we wanna go down this road at all or not.

Feel free to open a PR (I suggest we start small with NextJS and Replay/Browsertracing) but I can't guarantee that we will merge it in the end. If you still want to give it a try, we already have shims for Replay and Browsertracing, albeit for a slightly different purpose. Probably a good idea to reuse them if possible.

[curiousercreative]

@Lms24 FYC #9806