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?

@sentry/nextjs

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.

Can you try deleting your .next folder and re-building? Thanks!

Hi, thanks for answering so quickly!

I already tried deleting the .next directory but it didn't fix my issue.

And the next build command returns the same error:

./app/(dashboard)/layout.tsx
Module not found: Can't resolve 'next/dist/client/components/request-async-storage'

We are experiencing the same issues after bumping to 13.5.
Confirmed that all suggested steps did not work and that removing sentry from next config resolved the issue

related change: typehero/typehero@09ae9b7#diff-197cd8ca285a4abd2f21479e0bf6e36e90b08528fcd7f3bdbe8d1221897e377d

@bautistaaa

@bautistaaa two things:

Is this also happening in CI runs or just locally?
Can you run node -e "console.log(require.resolve('next/dist/client/components/request-async-storage'))" and share the output? Thanks!

To me, something feels off. I cannot reproduce this yet we have a few reports of this. Our E2E tests also don't run into this issue.

I have a feeling that the people running into this have some sort of dirty state that the SDK doesn't particularily like (i.e. a state where next/dist/client/components/request-async-storage is available via require.resolve).

My hunch was that it had something to do with both the esm and cjs builds being loaded and being unaware of the work the others had done (init in A, check init in B).

It looks like the problem actually stems from a missing reference to root monorepo node_modules locations in incomingConfig.resolve.modules, passed from Next.js to src/config/webpack.ts.

In my project (using Yarn Workspaces), and I assume any other monorepo with default resolve webpack configs, incomingConfig.resolve.modules is populated with these 2 values:

'node_modules'
'/<absolute_path_to_monorepo>/packages/<project_with_next_js>'

Sentry has some logic that turns (1) into '/<absolute_path_to_monorepo>/packages/<project_with_next_js>/node_modules', but @sentry/nextjs in this case is actually installed in the Monorepo's root node_modules directory, or '/<absolute_path_to_monorepo>/node_modules'. Since the resolution logic doesn't know modules can live here, it thinks request-async-module doesn't exist and errors out accordingly.

There's probably a better way to accomplish this, but adding the following to my project's webpack config in next.config.mjs fixes the problem and removes the console warning as expected:

import findWorkspaceRoot from 'find-yarn-workspace-root';

const nextConfig = {
  ...
  webpack: config => ({
    resolve: {
      ...config.resolve,
      modules: [...config.resolve.modules, findWorkspaceRoot()],
    },
  }),
};

export default withSentryConfig(nextConfig, { ... }, { ... });

@FaresKi

@FaresKi If your project is a monorepo or uses otherwise an atypical structure for node_modules, the above will probably fix this issue for you.

@rsolomon

@rsolomon That is exactly what I am suspecting too, as per this comment. The thing is, we are already using webpackOptions.resolve.modules as base paths for the resolution algorithm. We should probably also add the root of the Next.js project there. Maybe Nx is messing with webpackOptions.resolve.modules 🤔.

As for

Sentry has some logic that turns (1) into '/<absolute_path_to_monorepo>/packages/<project_with_next_js>/node_modules', but @sentry/nextjs in this case is actually installed in the Monorepo's root node_modules directory, or '/<absolute_path_to_monorepo>/node_modules'. Since the resolution logic doesn't know modules can live here, it thinks request-async-module doesn't exist and errors out accordingly.

This is not entirely correct. The resolution algorithm will look upwards in the folder tree, layer for layer, checking each node_modules folder until it can find the requested module, which means the example you shared should actually work.

This is not entirely correct. The resolution algorithm will look upwards in the folder tree, layer for layer, checking each node_modules folder until it can find the requested module, which means the example you shared should actually work.

The logic you're talking about happens before and is therefore counteracted by this check. requireResolveLocation is "/<absolute_path_to_monorepo>/node_modules/next/dist/client/components/request-async-storage.external.js", while absoluteWebpackResolvableModuleLocations is ["<absolute_path_to_monorepo>/packages/<project_with_next_js>/node_modules", "<absolute_path_to_monorepo>/packages/<project_with_next_js>"]. requireResolveLocation does not start with either value in absoluteWebpackResolvableModuleLocations, so moduleIsWebpackResolvable returns false, which makes potentialRequestAsyncStorageLocations.find(potentialLocation => moduleIsWebpackResolvable(potentialLocation)) return null, ultimately being the return value of getRequestAsyncStorageModuleLocation.

In other words, that line's intent (based on the comment) seems to be to filter out global node_modules locations, but it instead filters any node_modules location above the outermost location defined in config.resolve.modules. In this case, that's the directory of the nextjs package itself.

@rsolomon

@rsolomon Oh you're absolutely right! Thanks for putting so much thought into this! <3 I'll try to find the time to find a solution here this week!

Happy to help 😄

@rsolomon

@rsolomon I opened a PR to fix all of this mess. I'd love to have you also take a look: #9259

@lforst

Thanks @lforst ! I'm at a conference all week but I'll do my best to check it out tonight or tomorrow night at the latest.

Hi everybody, we just released version 7.74.1 of the SDK which includes a fix for all of the problems discussed in this issue. Please try it out and let us know if the issue persists!

Still seeing this on 7.77.0 trying to run with ts-node --esm

@jamespsterling

@jamespsterling Hi, can you please open a new issue with reproduction steps? Thanks!

Hi, I temporarily resolved the issue by downgrading Next.js to version 13.3.4 from 13.4.1. The Sentry SDK versions I am using are:

"@sentry/nextjs": "^7.80.1",
"@sentry/utils": "^7.80.1",

I'm unsure if this is related to Next.js or Sentry, as Next.js version 13.4.1 was working fine for me before integrating Sentry.

I hope this information helps anyone facing a similar problem. Thanks!

I had the same issue in a pnpm workspace, i fixed it by installing @sentry/nextjs in the right app folder instead of root

Navigation Menu

Repository navigation

Sentry doesn't work on Next 13.5 #9092

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

45 remaining items

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Sentry doesn't work on Next 13.5 #9092

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 Sep 22, 2023

RilDev commented on Sep 22, 2023

bautistaaa commented on Sep 24, 2023

lforst commented on Sep 25, 2023

45 remaining items

rsolomon commented on Oct 7, 2023

rsolomon commented on Oct 7, 2023

lforst commented on Oct 9, 2023

rsolomon commented on Oct 9, 2023

lforst commented on Oct 10, 2023

rsolomon commented on Oct 10, 2023

lforst commented on Oct 16, 2023

rsolomon commented on Oct 16, 2023

lforst commented on Oct 17, 2023

jamespsterling commented on Nov 2, 2023

lforst commented on Nov 3, 2023

oxygenart commented on Nov 18, 2023

remorses commented on Dec 29, 2023

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions