sentry-javascript: [Next] My webpack config is ignored since 7.22

Is there an existing issue for this?

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

https://github.com/getsentry/sentry-javascript/pull/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

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 1
  • Comments: 15 (10 by maintainers)

Most upvoted comments

Follow-up question: the withSentryConfig.d.ts declaration file still declares the return type of withSentryConfig to be NextConfigFunction | NextConfigObject, but the implementation now unconditionally returns a function. Was this just an oversight, or was the return type deliberately left broader to leave the option open to maybe return an object again in a later version?

Your assumption is correct. I deliberately left this return type broad so that we can go back to returning an object in future versions without requiring a major bump if we deem it necessary.

Quickly rewriting your config for you:

this works for me, thanks

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