Nextjs 13 app router in nx monorepo unable to build following sentry instructions #8798
Description
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.