[Next] My webpack config is ignored since 7.22

[simPod]

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

No response

Link to Sentry event

No response

Steps to Reproduce

I believe it has something to do with

#6291

Have a custom webpack config:

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
 ...
 sentry: {
 disableClientWebpackPlugin: true,
 disableServerWebpackPlugin: true,
 },
 webpack(config, { dev }) {

 console.log('hi');

 return config;
 },
};

Expected Result

Echoes "hi" since it's picked up by Next

Actual Result

My webpack config is ignored

[zcmk123]

Version 7.22.0 has lot of issues, my project can not finish build process.
At first throw sassError, i thought maybe my style file has something wrong.
Takes my whole afternoon, find out it's sentry plugin problem...

[lforst]

Hi, thanks for reporting this. Can you guys share your complete next configs? I have a suspicion that there are some compatibilities with other wrappers.

[simPod]

// @ts-check

const withOptimizedImages = require('next-optimized-images');
const { withSentryConfig } = require('@sentry/nextjs');

const plugins = [
 nextConfig =>
 withOptimizedImages({
 ...nextConfig,
 ...{
 handleImages: ['jpeg', 'png', 'webp', 'gif', 'ico'],
 optimizeImagesInDev: true,
 },
 }),
 withSentryConfig,
];

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
 experimental: {
 transpilePackages: ['react-syntax-highlighter', 'swagger-client', 'swagger-ui-react'],
 },
 // Disable sentry plugin
 // https://github.com/getsentry/sentry-javascript/blob/115b0f3c07efa755c8f90d32cfd1783a35451eba/packages/nextjs/src/config/webpack.ts#L82-84
 sentry: {
 disableClientWebpackPlugin: true,
 disableServerWebpackPlugin: true,
 },
 webpack(config, { dev }) {

 console.log('hi');

 return config;
 },
};

module.exports = (phase, { defaultConfig }) => {
 // Next complains about unsupported options from defaultConfig https://github.com/vercel/next.js/issues/39161
 // Next complains about next-optimized-images options https://github.com/cyrilwanner/next-optimized-images/issues/285
 return plugins.reduce((acc, plugin) => plugin(acc), { ...defaultConfig, ...nextConfig });
};

[lforst]

withSentryConfig returns a function with the same signature as your module.exports. You need to consider that.

Quickly rewriting your config for you:

// @ts-check

const withOptimizedImages = require('next-optimized-images');
const { withSentryConfig } = require('@sentry/nextjs');

const plugins = [
 nextConfig =>
 withOptimizedImages({
 ...nextConfig,
 ...{
 handleImages: ['jpeg', 'png', 'webp', 'gif', 'ico'],
 optimizeImagesInDev: true,
 },
 })
];

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
 experimental: {
 transpilePackages: ['react-syntax-highlighter', 'swagger-client', 'swagger-ui-react'],
 },
 // Disable sentry plugin
 // https://github.com/getsentry/sentry-javascript/blob/115b0f3c07efa755c8f90d32cfd1783a35451eba/packages/nextjs/src/config/webpack.ts#L82-84
 sentry: {
 disableClientWebpackPlugin: true,
 disableServerWebpackPlugin: true,
 },
 webpack(config, { dev }) {

 console.log('hi');

 return config;
 },
};

module.exports = (phase, { defaultConfig }) => {
 const sentrifiedConfig = withSentryConfig(nextConfig)(phase, { defaultConfig });

 // Next complains about unsupported options from defaultConfig https://github.com/vercel/next.js/issues/39161
 // Next complains about next-optimized-images options https://github.com/cyrilwanner/next-optimized-images/issues/285
 return plugins.reduce((acc, plugin) => plugin(acc), { ...defaultConfig, ...sentrifiedConfig });
};

[jesseswedlund]

I'm experiencing a similar problem. I'm using svgr/webpack in my app, so the Next config I'm passing to withSentryConfig contains this code:

webpack(config) {
 config.module.rules.push({
 test: /\.svg$/,
 use: [{ loader: '@svgr/webpack', options: { icon: true } }],
 });

 return config;
 },

I believe that withSentryConfig might be overwriting my webpack rule on line 54 of withSentryConfig.ts:

 return {
 ...userNextConfigObject,
 webpack: constructWebpackConfigFunction(userNextConfigObject, userSentryWebpackPluginOptions, userSentryOptions),
 };

[lforst]

I'm experiencing a similar problem. I'm using svgr/webpack in my app, so the Next config I'm passing to withSentryConfig contains this code:

webpack(config) {
 config.module.rules.push({
 test: /\.svg$/,
 use: [{ loader: '@svgr/webpack', options: { icon: true } }],
 });

 return config;
 },

I believe that withSentryConfig might be overwriting my webpack rule on line 54 of withSentryConfig.ts:

 return {
 ...userNextConfigObject,
 webpack: constructWebpackConfigFunction(userNextConfigObject, userSentryWebpackPluginOptions, userSentryOptions),
 };

That is unlikely since we're pretty careful about user-provided webpack functions here: https://github.com/getsentry/sentry-javascript/blob/master/packages/nextjs/src/config/webpack.ts#LL74

Can you share your nextjs config? If anything changed, it's what is returned by withSentryConfig.

[simPod]

Quickly rewriting your config for you:

this works for me, thanks

[simPod]

I handled the case where NextConfigFunction is returned.

module.exports = (phase, { defaultConfig }) => {
 // Next complains about unsupported options from defaultConfig https://github.com/vercel/next.js/issues/39161
 // Next complains about next-optimized-images options https://github.com/cyrilwanner/next-optimized-images/issues/285
 return plugins.reduce(
 (config, plugin) => {
 const appliedPlugin = plugin(config);

 return typeof appliedPlugin === 'function'
 ? appliedPlugin(phase, { defaultConfig })
 : appliedPlugin;
 },
 { ...defaultConfig, ...nextConfig },
 );
};