`Module not found: Can't resolve '@sentry/utils/esm/buildPolyfills'` Help setting up Docker Compose for local dev w/ Nextjs 13/Turborepo/pnpm - Missing Sentry package

localpath commented 1 year ago

Is there an existing issue for this?

[X] I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
[X] I have reviewed the documentation https://docs.sentry.io/
[X] 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.60.1

Framework Version

nextjs 13.4.9

Link to Sentry event

No response

SDK Setup

import * as Sentry from '@sentry/nextjs';

import { APP } from '@/utils/constants';

function sentryInit() {
  if (APP.ENVIRONMENT === 'development') {
    return;
  }

  Sentry.init({
    dsn: APP.SENTRY_DSN,
    environment: APP.ENVIRONMENT,
    // Replay may only be enabled for the client-side
    integrations: [new Sentry.Replay()],

    // Set tracesSampleRate to 1.0 to capture 100%
    // of transactions for performance monitoring.
    // We recommend adjusting this value in production
    tracesSampleRate: 0.1,

    // Capture Replay for 10% of all sessions,
    // plus for 100% of sessions with an error
    replaysSessionSampleRate: 0,
    replaysOnErrorSampleRate: 1.0,

    // ...

    // Note: if you want to override the automatic release value, do not set a
    // `release` value here - use the environment variable `SENTRY_RELEASE`, so
    // that it will also get attached to your source maps
  });
}

sentryInit();

Steps to Reproduce

Turborepo w/ Nextjs 13 app - Pretty standard install (private repo so can't share literal app)
Add Dockerfile, Compose file
Install everything in Dockerfile and run it
Nextjs app starts then when rendering first page errors saying Module not found: Can't resolve '@sentry/utils/esm/buildPolyfills'

Expected Result

The nextjs app can render a page and there is no module linking issue.

Actual Result

Lms24 commented 1 year ago

Hi @localpath are you able to provide a minimal reproduction example repo? This would help us a great deal to investigate and debug this further.

localpath commented 1 year ago

@Lms24 here is an example repo generated from Turborepo starter. Followed manual install of Sentry Nextjs App w/o CLI config. My temporary fix was just adding the package to my dependencies obviously but weird that only in Docker it doesn't resolve itself but locally or deploying in CI its perfectly fine (AWS CLI for deploy into S3, no docker needed for SSG)

https://github.com/localpath/next-sentry-turbo-bug

You can see that web using the sentry sdk running on 3000 errors whereas docs running on 3001 is fine w/ no sentry sdk.

2023-07-27 20:50:06 2023-07-27 20:50:06 > next-sentry-turbo-bug@ dev /usr/src/app 2023-07-27 20:50:06 > turbo run dev 2023-07-27 20:50:06 2023-07-27 20:50:07 • Packages in scope: docs, eslint-config-custom, tsconfig, ui, web 2023-07-27 20:50:07 • Running dev in 5 packages 2023-07-27 20:50:07 • Remote caching disabled 2023-07-27 20:50:07 web:dev: cache bypass, force executing e4ecd38f10fae26a 2023-07-27 20:50:07 docs:dev: cache bypass, force executing f6ad39ebf902343e 2023-07-27 20:50:08 web:dev: 2023-07-27 20:50:08 web:dev: > web@1.0.0 dev /usr/src/app/apps/web 2023-07-27 20:50:08 web:dev: > next dev 2023-07-27 20:50:08 web:dev: 2023-07-27 20:50:08 docs:dev: 2023-07-27 20:50:08 docs:dev: > docs@1.0.0 dev /usr/src/app/apps/docs 2023-07-27 20:50:08 docs:dev: > next dev --port 3001 2023-07-27 20:50:08 docs:dev: 2023-07-27 20:50:09 web:dev: - ready started server on 0.0.0.0:3000, url: http://localhost:3000 2023-07-27 20:50:09 docs:dev: - ready started server on 0.0.0.0:3001, url: http://localhost:3001 2023-07-27 20:50:14 web:dev: 2023-07-27 20:50:14 web:dev: warn - In order to be able to deminify errors, @sentry/nextjs creates sourcemaps and uploads them to the Sentry server. Depending on your deployment setup, this means your original code may be visible in browser devtools in production. To prevent this, set hideSourceMaps to true in the sentry options in your next.config.js. To disable this warning without changing sourcemap behavior, set hideSourceMaps to false. (In @sentry/nextjs version 8.0.0 and beyond, this option will default to true.) See https://webpack.js.org/configuration/devtool/ and https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#use-hidden-source-map for more information. 2023-07-27 20:50:14 web:dev: 2023-07-27 20:50:16 docs:dev: - event compiled client and server successfully in 2.7s (311 modules) 2023-07-27 20:50:17 docs:dev: - wait compiling... 2023-07-27 20:50:17 docs:dev: - event compiled client and server successfully in 816 ms (311 modules) 2023-07-27 20:50:18 web:dev: - event compiled client and server successfully in 4.6s (719 modules) 2023-07-27 20:50:19 web:dev: - wait compiling... 2023-07-27 20:50:19 web:dev: - wait compiling /page (client and server)... 2023-07-27 20:50:19 web:dev: - wait compiling /_error (client and server)... 2023-07-27 20:50:21 web:dev: - error ./app/layout.tsx 2023-07-27 20:50:21 web:dev: Module not found: Can't resolve '@sentry/utils/esm/buildPolyfills' 2023-07-27 20:50:21 web:dev: 2023-07-27 20:50:21 web:dev: https://nextjs.org/docs/messages/module-not-found 2023-07-27 20:50:21 web:dev: - warn Fast Refresh had to perform a full reload due to a runtime error. 2023-07-27 20:51:54 docs:dev: - wait compiling /page (client and server)... 2023-07-27 20:51:56 docs:dev: - event compiled client and server successfully in 2.1s (503 modules)

Lms24 commented 1 year ago

@localpath I tried running your repro in docker (docker compose up in the repo root) but I'm getting this error:

gh-sentry-javascript-8658-next-turbo-docker-turbo-1  | 
gh-sentry-javascript-8658-next-turbo-docker-turbo-1  | > next-sentry-turbo-bug@ dev /usr/src/app
gh-sentry-javascript-8658-next-turbo-docker-turbo-1  | > turbo run dev
gh-sentry-javascript-8658-next-turbo-docker-turbo-1  | 
gh-sentry-javascript-8658-next-turbo-docker-turbo-1  | 
gh-sentry-javascript-8658-next-turbo-docker-turbo-1  | /usr/src/app/node_modules/.bin/../turbo/bin/turbo: line 1: syntax error: unexpected word (expecting ")")

Any ideas? How are you running it?

Followed manual install of Sentry Nextjs App w/o CLI config.

What exactly do you mean by "without CLI config"?

My temporary fix was just adding the package

Which package? @sentry/utils, @sentry/cli?

In case it's the latter, then this might be related to this issue: https://github.com/getsentry/sentry-javascript/issues/8511. Maybe the suggested workaround works for you, too.

localpath commented 1 year ago

@Lms24 hey yea sorry for that. I first ran the app outside of docker with pnpm install then pnpm dev just to make sure the code would run. I bet my shared volume is mapping stuff from that install step just building the container on its own is missing since its a rough draft container.

My steps were:

npx create-turbo -e basic
pnpm install
pnpm install @sentry/nextjs --filter=web
setup sentry configs
pnpm dev to make sure the apps run just as a sanity check then closing them
Add dockerfile and compose
docker compose up --build -d since i use docker desktop i run in detached mode so my shell isn't cramped

I didn't add the sentry CLI setup since that seems like its just focused on source mapping and stuff which is not relevant to this.

Yea adding @sentry/utils to the app using @sentry/nextjs fixes the issue as you'd imagine bc the package is there as far as a docker image is concerned.

IMO I think this is some weird interaction with the package manager and turborepo but can't figure it out. Tried lots of tricks with hoisting and dependencies but none of that worked.

lforst commented 1 year ago

To me, this looks resolved. Seems to be some weird pnpm thing and webpack not being able to pick up the dependency. Let us know if this is still an issue and we can reopen.

yashsway commented 12 months ago

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.

pnpm install @sentry/utils

getsentry / sentry-javascript