Repository navigation
Attempted import error: 'Replay' is not exported from '@sentry/nextjs' (imported as 'Sentry'). #9796
Closed as not planned
Description
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
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
Activity
Lms24 commentedon Dec 12, 2023
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 commentedon Dec 12, 2023
@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 commentedon Dec 12, 2023
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.jsonsimilarly 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 commentedon Dec 12, 2023
@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 commentedon Dec 12, 2023
I understand your use case and it's been brought up before:
"captureRemixServerException" is not exported by "node_modules/@sentry/remix/esm/index.client.js"#9594The 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,
ReplayandBrowserTracingare 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 commentedon Dec 12, 2023
@Lms24 FYC #9806
feat(nextjs): Export common shims for server and edge nextjs modules