Next images config is not working with sentry version 7.22.0

[nirmal25990]

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?

Self-hosted/on-premise

Which package are you using?

@sentry/nextjs

SDK Version

7.22.0

Framework Version

Next 12.3.1, React: 18.2.0

Link to Sentry event

No response

Steps to Reproduce

My next config is like this.

const nextConfig = {
 reactStrictMode: true,
 images: {
 remotePatterns: [
 {
 protocol: "https",
 hostname: "**",
 pathname: "**",
 },
 ],
 },
 //https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/tree-shaking/#tree-shaking-optional-code
 webpack: (config, {webpack}) => {
 config.plugins.push(
 new webpack.DefinePlugin({
 __SENTRY_DEBUG__: false,
 __SENTRY_TRACING__: false,
 })
 );
 return config;
 },
 swcMinify: true,
}

1. "@sentry/nextjs": "7.21.1" and "@sentry/utils": "7.21.1". It is working fine.
2. After updating the sentry version to 7.22.0. Getting errors like hostname is not configured under images in your "next.config.js"

Expected Result

It should work fine without any issues.

Actual Result

Getting errors like this.

[lforst]

Hi can you share your entire next.js config please?

[nirmal25990]

@lforst

/** @type {import('next').NextConfig} */
const nextConfig = {
 reactStrictMode: true,
 images: {
 remotePatterns: [
 {
 protocol: "https",
 hostname: "**",
 pathname: "**",
 },
 ],
 },
 //https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/tree-shaking/#tree-shaking-optional-code
 webpack: (config, {webpack}) => {
 config.plugins.push(
 new webpack.DefinePlugin({
 __SENTRY_DEBUG__: false,
 __SENTRY_TRACING__: false,
 })
 );
 return config;
 },
 swcMinify: true,
 async redirects() {
 return [
 {
 source: "/",
 destination: "/capture",
 permanent: true,
 },
 ];
 },
};

//https://paragraph.xyz/@blog/how-we-reduced-next.js-page-size-by-3.5x-and-achieved-a-98-lighthouse-score
const withBundleAnalyzer = require("@next/bundle-analyzer")({
 enabled: process.env.ANALYZE === "true",
});

// module.exports = nextConfig;

// This file sets a custom webpack configuration to use your Next.js app
// with Sentry.
// https://nextjs.org/docs/api-reference/next.config.js/introduction
// https://docs.sentry.io/platforms/javascript/guides/nextjs/

const {withSentryConfig} = require("@sentry/nextjs");

const moduleExports = {
 // your existing module.exports

 // Optional build-time configuration options
 sentry: {
 // See the 'Configure Source Maps' and 'Configure Legacy Browser Support'
 // sections below for information on the following options:
 // - disableServerWebpackPlugin
 // - disableClientWebpackPlugin
 // - hideSourceMaps
 // - widenClientFileUpload
 // - transpileClientSDK
 },
};

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, org, project, authToken, configFile, stripPrefix,
 // urlPrefix, include, ignore

 silent: true, // Suppresses all logs
 // For all available options, see:
 // https://github.com/getsentry/sentry-webpack-plugin#options.
};

// Make sure adding Sentry options is the last code to run before exporting, to
// ensure that your source maps include changes from all other Webpack plugins
module.exports = withBundleAnalyzer(
 withSentryConfig(nextConfig, moduleExports, sentryWebpackPluginOptions)
);

[lforst]

Hi, please see #6336 on how to combine withSentryConfig with withBundleAnalyzer.