sentry-javascript: Sentry doesn't work on Next 13.5
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?
SDK Version
7.70.0
Framework Version
Next 13.5.2
Link to Sentry event
No response
SDK Setup
// This file configures the initialization of Sentry on the client.
// The config you add here will be used whenever a users loads a page in their browser.
// https://docs.sentry.io/platforms/javascript/guides/nextjs/
import * as Sentry from "@sentry/nextjs";
Sentry.init({
dsn: DNS_URL,
// Adjust this value in production, or use tracesSampler for greater control
tracesSampleRate: 1,
// Setting this option to true will print useful information to the console while you're setting up Sentry.
debug: false,
replaysOnErrorSampleRate: 1.0,
// This sets the sample rate to be 10%. You may want this to be 100% while
// in development and sample at a lower rate in production
replaysSessionSampleRate: 0.1,
// You can remove this option if you're not planning to use the Sentry Session Replay feature:
integrations: [
new Sentry.Replay({
// Additional Replay configuration goes in here, for example:
maskAllText: true,
blockAllMedia: true,
}),
],
});
Steps to Reproduce
- update project from Next 13.4 to 13.5 with
yarn add next@latest react@latest react-dom@latest eslint-config-next@latest - remove and reinstall Sentry with
npx @sentry/wizard@latest -i nextjs - run dev server with
yarn dev
Expected Result
When navigating to localhost:3000, it displays a page.
Actual Result
When navigating to localhost:3000, it throws an error:
⨯ ./app/layout.tsx
Module not found: Can't resolve 'next/dist/client/components/request-async-storage'
I check in my node_modules directory and indeed request-async-storage is missing.
About this issue
- Original URL
- State: closed
- Created 9 months ago
- Reactions: 3
- Comments: 49 (19 by maintainers)
Here’s the summary of the problem as I see it:
next.config.mjs(extra emphasis on mjs, an ES Module). This is explicitly not transpiled, which is why Sentry imports in a NextJS app work fine anywhere other than here."type": "module"and an"exports"field set. More info in this ticket: https://github.com/getsentry/sentry-javascript/issues/6147"main"attribute.@sentry/nextjs@7.73.0is the mjs path forrequest-async-storage. Unsure if setting it to thecjspath would fix it in this case, but ideally the solution would be to configure for a proper mjs import.Anyway, hope this helps identify and fix the root problem. Tagging @FaresKi again since this ticket is still closed and might not be getting direct attention.
We’ve released changes in https://github.com/getsentry/sentry-javascript/releases/tag/7.73.0 to fix the
requestAsyncStorageShimissues from before. Please give it a try and let us know if that helped. Sorry for the back and forth, appreciate the patience from all of you!@FaresKi good point. I’ll try to cut a release today.
@RilDev Is the error you were getting still happening on release
7.72.0of the SDK?@FaresKi @nles This error is different now that this issue is describing. We’ll look into it.
@RilDev We just released version
7.71.0of the SDK that should fix this. Would you mind trying it out?Dunno if this is fixed yet
@RilDev Thanks so much for running the command. This more or less confirms my suspicion. It seems that there is a global installation of Next.js on a version pre-13.5 that makes our call to
require.resolve('next/dist/client/components/request-async-storage')resolve to the global installation.I opened a PR that will likely fix this: https://github.com/getsentry/sentry-javascript/pull/9100