Module not found: Can't resolve '@sentry/utils/esm/buildPolyfills'

[HoJin9622]

Environment

SaaS (https://sentry.io/)

Steps to Reproduce

"next": "^13.4.3",
"react": "^18.2.0",
"react-dom": "^18.2.0"

use app dir

1. npx @sentry/wizard@latest -i nextjs
2. npm run dev
3. Error Occrued!

Expected Result

It works without any problems.

Actual Result

./app/posts/[slug]/page.tsx
Module not found: Can't resolve '@sentry/utils/esm/buildPolyfills'

https://nextjs.org/docs/messages/module-not-found

Product Area

Unknown

Link

No response

DSN

No response

Version

7.52.1

[getsantry]

Assigning to @getsentry/support for routing, due by Monday, May 22nd at 5:00 pm (sfo). ⏲️

[lforst]

Hey, can you share a small reproduction app where this is happening thank you!

[tubbo]

This also happened to me in an application using Yarn Berry (v3.5.1) and PnP on NextJS. @sentry/nextjs kept erroring in the build with this exact same error, until I set nodeLinker: node-modules in my .yarnrc.

I also tried unplugging @sentry/nextjs as well as next itself, but that didn't seem to do anything. I suspect some dependency of the next build process is the culprit here...

[Huespal]

Hello.
Our team is experiencing the same.
Do you have a date when it will be fixed?
Thank you.

[lforst]

@Huespal so far nobody provided a reproduction example, which we would need in order to fix this bug.

[HoJin9622]

Reproduction app
This error occurs in a project using yarn berry.

[lforst]

Ok since this is working for all other package managers do you mind opening an upstream issue in yarn berry for this? Thanks.

[HoJin9622]

Ok since this is working for all other package managers do you mind opening an upstream issue in yarn berry for this? Thanks.

Okay. I'll create an upstream issue.

[twavv]

@mydea @lforst This is not a bug in Yarn. Yarn requires packages to strictly declare their dependencies and will raise an error if a package attempts to import something it hasn't declared.

I believe(*) in this case the reason it fails is because the Sentry NextJS plugin adds some extra code in the various files in app/ to do its early initialization magic, but that adds imports to @sentry/utils for polyfills. If a user has only @sentry/nextjs explicitly installed, Yarn will have a fit if @sentry/utils is imported from within the project since the project doesn't explicitly declare @sentry/utils as a dependency. ((It's fine to import @sentry/utils from inside the @sentry/nextjs package, but from Yarn's perspective, we're trying to import @sentry/utils from the app itself, not the @sentry/nextjs package))

The quickest fix for this is just to explicitly add @sentry/utils as a dependency to your project. Beyond that, can @sentry/nextjs be made to avoid importing @sentry/utils in this way?

(* I'm making some educated guesses here, but I'm not familiar with how the Sentry integration actually hooks into NextJS so it might be off base)

[lforst]

is it worth providing a reproduction?

@sebpowell Yes please. We have yet to receive proper repro on this.

[mayank1513]

Repro - https://github.com/mayank1513/next.js/tree/example/app-dir-sentry

[lforst]

@mayank1513 Thanks can you provide instructions on how to reproduce. Thanks!

[mayank1513]

clone the branch or create codespace then

pnpm i && pnpm build && pnpm next-with-deps ./examples/with-sentry

[mayank1513]

https://github.com/vercel/next.js/blob/canary/contributing/examples/run-example-apps.md

[lforst]

@mayank1513 your repro is failing due to issues unrelated to sentry:

@next/react-dev-overlay:build: src/internal/helpers/launchEditor.ts(217,5): error TS2322: Type 'ParseEntry[]' is not assignable to type 'string[]'.
@next/react-dev-overlay:build:   Type 'ParseEntry' is not assignable to type 'string'.
@next/react-dev-overlay:build:     Type '{ op: ControlOperator; }' is not assignable to type 'string'.
@next/react-dev-overlay:build:  ELIFECYCLE  Command failed with exit code 2.
@next/react-dev-overlay:build: ERROR: command finished with error: command (/workspaces/clones/next.js/packages/react-dev-overlay) pnpm run build exited (1)

[yashsway]

Attempting to add Sentry to my Next.js project (using App Router and pnpm) using the Sentry Wizard:

npx @sentry/wizard@latest -i nextjs

I get this error:

Update:
For anyone coming here using pnpm and NextJS App Router - install @sentry/utils manually after everything the Sentry Wizard installs and sets up for your project. This fixes it! ✅ Not sure why this isn't installed by the wizard.

pnpm install @sentry/utils

[geoffdavis92]

I was running into this similar problem, and it turns out in my Webpack configuration (technically the config function that I send through my 11ty Webpack plugin config) I had at one time added ".js" to the resolve.extensions array, and subsequently removed it.

I determined that removing that entry in part caused this issue to occur.

Adding the .js extension back solved the issue.

Here's an abridged section of my plugin's Webpack config object:

// ...
module: {
  rules: [
    // I'm extending a default configuration
    ...defaultWebpackConfig.module.rules,
    {
      test: /\.ts$/,
      use: "ts-loader",
      exclude: /node_modules|\.d\.ts$/,
    },
  ],
},
resolve: {
  extensions: [".ts", ".js"],
}
// ...

For reference, here's my tsconfig:

{
  "include": ["./src/js/**/*"],
  "exclude": ["node_modules"],
  "compilerOptions": {
    "target": "ES2015",
    "moduleResolution": "node",
    "allowJs": true,
    "module": "ES6",
    "lib": ["es2022", "dom", "dom.iterable"],
    "sourceMap": true,
    "inlineSources": true,

    // Set `sourceRoot` to  "/" to strip the build path prefix
    // from generated source code references.
    // This improves issue grouping in Sentry.
    "sourceRoot": "/"
  }
}

[kirbysayshi]

I'm fairly certain that if you are using pnpm or yarn berry, you'll still need to manually add @sentry/utils as a directly dependency to your nextjs project. Otherwise you'll get a variant of the original error reported!

pnpm add @sentry/utils

[lforst]

As a positive outlook: We aim to fix this reliably with the new major of the SDK! Sorry for the trouble this has caused. We have a bit of tech debt here.