fix(nextjs): Fix incomplete merging of user config with Sentry config

[Fumler]

Unless I'm misunderstanding something, it looks to me like the recommended way to use the withSentryConfig method will override most of the users custom next.config.js setup.

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

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
  // 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 = withSentryConfig(moduleExports, SentryWebpackPluginOptions);

So e.g. if my config looks like:

const moduleExports = {
  experimental: {
    optimizeFonts: true
  },
  images: {
    domains: ['res.cloudinary.com']
  }
}

and if I then follow the recommended approach, none of my custom settings will be included (if I understand correctly, haven't actually checked).

So this PR attempts to solve this by allowing any custom setting from an existing next.config.js to be added to the one returned by withSentryConfig, as well as allowing custom webpack functions from the existing config to further mutate the returned config.

Fixes #3432
Fixes #3446

[HazAT]

Thanks for this!

[HazAT]

We ideally going to release this today together with
#3426

[lobsterkatie]

Drat. Thanks for catching that, and especially for fixing it!

My one concern here is that we're trying to enforce that our plugin gets added last, so that our source maps account for all changes to the code. So I think we need to put the last block you added higher up, as the first thing in our webpack function.

(I hear your point about further mutating the returned config, but since I think that won't be a super common need, I'd rather err on the side of making sure source maps work for everyone. If you do need to do such a mutation, you can always modify the object that withSentryConfig() returns in next.config.js.)

[Fumler]

Drat. Thanks for catching that, and especially for fixing it!

My one concern here is that we're trying to enforce that our plugin gets added last, so that our source maps account for all changes to the code. So I think we need to put the last block you added higher up, as the first thing in our webpack function.

(I hear your point about further mutating the returned config, but since I think that won't be a super common need, I'd rather err on the side of making sure source maps work for everyone. If you do need to do such a mutation, you can always modify the object that withSentryConfig() returns in next.config.js.)

I agree with that not being a common need. Change added.

[lobsterkatie]

LGTM!

[MAfzalKhan1997]

so What's the solution ? I'm still facing this.
"@sentry/nextjs": "^6.7.1",

[lobsterkatie]

@MAfzalKhan1997 - Can you try updating to 6.8.0, and if you're still having a problem, provide a little more detail, please? (Specifically, what your config looks like before it's run through withSentryConfig, and what part of it is getting clobbered.)

6.7.2 contained a number of changes to this part of the code, and they should, AFAIK, fix the remaining issues with merging previous config with ours.

[MAfzalKhan1997]

@lobsterkatie thanks for pretty nice response. Well now I've updated sentry to 6.7.2 and it solved my issue but partially as it's working fine with direct export but not working with next-compose-plugins.

do let me know that updating to 6.8.0 will solve this issue too ?

[olivertilk]

This is still an issue for me. I just tried to add Sentry 6.8.0 to my Next.js project with the wizard but it doesn't see an exported configuration anymore, even with an empty moduleExports. I get error "Detected next.config.js, no exported configuration found."

[lobsterkatie]

@olivertilk - Can you please show me what your next.config.js looks like?

@MAfzalKhan1997 Can you please file a separate issue vis-à-vis next-compose-plugins? It's a separate question and I don't want it to get lost.

[olivertilk]

@lobsterkatie Initially I had

module.exports = {
  async redirects() {
    return [
      {
        source: '/dashboard',
        destination: '/',
        permanent: true,
      },
    ]
  },
}

but I got the error even without an existing next.config.js.

[olivertilk]

@lobsterkatie Initially I had

module.exports = {
  async redirects() {
    return [
      {
        source: '/dashboard',
        destination: '/',
        permanent: true,
      },
    ]
  },
}

but I got the error even without an existing next.config.js.

@lobsterkatie My apologies, it turns out my Next.js module itself was not updated to at least version 10.0.8 as required. It works now.

[lobsterkatie]

Great - glad to hear it!

[samheutmaker]

Pinging @lobsterkatie @HazAT

This does not appear to be fixed in 6.11.0. Including the Sentry Webpack plugin breaks SVG loading. It seems to be overwriting mymodule.rules configuration in Webpack. Using [email protected] and @sentry/[email protected].

next.config.js

const webpack = require('webpack');
const { withSentryConfig } = require('@sentry/nextjs');
const readEnv = require('./ops/readEnv');

const envVars = readEnv();

const moduleExports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      issuer: {
        test: /\.(js|ts)x?$/,
      },
      use: ['@svgr/webpack'],
    });

    // inject dotenv configuration
    config.plugins.push(new webpack.EnvironmentPlugin(envVars));
    return config;
  },
  images: {
    domains: ['storage.googleapis.com'],
  },
  async redirects() {
    return [
      {
        source: '/',
        destination: '/search',
        permanent: false,
      },
      {
        source: '/app/dashboard',
        destination: '/app/dashboard/listings',
        permanent: false,
      },
    ];
  },
  async rewrites() {
    return [
      {
        source: '/app/:any*',
        destination: '/app',
      },
    ];
  },
};

/**
 * For all available options, see:
 * https://github.com/getsentry/sentry-webpack-plugin#options.
 */
const SentryWebpackPluginOptions = {
  silent: true,
  release: envVars.SHORT_SHA,
  // include: './.dist'
};

/**
 * 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 = withSentryConfig(moduleExports, SentryWebpackPluginOptions);