[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 },
  );
};