Nextjs 13 app router in nx monorepo unable to build following sentry instructions

[rvermootenct]

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.63.0

Framework Version

13.4.4

Link to Sentry event

No response

SDK Setup

// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on).
// The config you add here will be used whenever one of the edge features is loaded.
// Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally.
// https://docs.sentry.io/platforms/javascript/guides/nextjs/

import * as Sentry from '@sentry/nextjs'

Sentry.init({
  dsn: 'XXXXXXX',

  // 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,
})

// 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: 'xxxxxxxxx,

  // 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,
    }),
  ],
})

// This file configures the initialization of Sentry on the server.
// The config you add here will be used whenever the server handles a request.
// https://docs.sentry.io/platforms/javascript/guides/nextjs/

import * as Sentry from '@sentry/nextjs'

Sentry.init({
  dsn: 'xxxxxxxxx',

  // 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,
})

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { withNx, composePlugins } = require('@nx/next')
const { withSentryConfig } = require('@sentry/nextjs')

/**
 * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
 * */
const nextConfig = {
  nx: {
    // Set this to true if you would like to use SVGR
    // See: https://github.com/gregberge/svgr
    svgr: false,
  },
  compiler: {
    styledComponents: true,
  },
  experimental: {
    appDir: true,
    serverActions: true,
  },
  transpilePackages: ['@saas-ui/date-picker'],
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'xxxxxxxx.supabase.co',
      },
      {
        hostname: 'localhost',
      },
    ],
  },
}
const sentryWebpackPluginOptions = {
  // Additional config options for the Sentry Webpack plugin. Keep in mind that
  // the following options are set automatically, and overriding them is not
  // recommended:
  //   release, url, configFile, stripPrefix, urlPrefix, include, ignore

  org: 'xxxxx',
  project: 'javascript-nextjs',

  // An auth token is required for uploading source maps.
  // You can get an auth token from https://sentry.io/settings/account/api/auth-tokens/
  // The token must have `project:releases` and `org:read` scopes for uploading source maps
  authToken: process.env.SENTRY_AUTH_TOKEN,

  silent: true, // Suppresses all logs

  // For all available options, see:
  // https://github.com/getsentry/sentry-webpack-plugin#options.
}
const withSentry = config => withSentryConfig(config, sentryWebpackPluginOptions)

const plugins = [withNx, withSentry]
module.exports = composePlugins(...plugins)(nextConfig)

Steps to Reproduce

1.) Followed the instructions on manual installation (https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/ )
2.) Ran locally, was able to see crash reports.
3.) try to build

Expected Result

A build should be able to complete.

Actual Result

While building I get this error:

./middleware.ts
Module not found: Can't resolve 'sentry.edge.config.js'
Did you mean './sentry.edge.config.js'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules, /Users/xxx/repos/xxx).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.

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

- info Creating an optimized production build .
 >  NX   Build failed because of webpack errors


Error: Build failed because of webpack errors
    at webpackBuildImpl (/Users/xxxx/Repos/xxxxxx/node_modules/next/dist/build/webpack-build/impl.js:262:21)
    at async webpackBuild (/Users/xxxx/Repos/xxxx/node_modules/next/dist/build/webpack-build/index.js:137:16)
    at async /Users/xxxx/Repos/xxxx/node_modules/next/dist/build/index.js:559:123
    at async Span.traceAsyncFn (/Users/xxxx/Repos/xxxx/node_modules/next/dist/trace/trace.js:103:20)
    at async build (/Users/xxxxx/Repos/xxxxx/node_modules/next/dist/build/index.js:145:29)

The middleware file aswell as the sentry files are in the root of the nextjs app.

[lforst]

Thanks for reporting this. I pushed a fix which we will release asap. Wondering why I didn't run into this in my test app..

[rvermootenct]

Thank you @lforst please find GIF tax below:

[rvermootenct]

@lforst honestly so impressed in how quickly y'all jumped on this. Big kudos.