Next.js + Custom Webpack Config Broken

[nahtnam]

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?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/nextjs

SDK Version

8.40.0-8.43.0

Framework Version

Next 14.2.2

Link to Sentry event

No response

Reproduction Example/SDK Setup

Next config:

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  eslint: {
    dirs: ["."],
  },
  assetPrefix: getAssetPrefix(),
  poweredByHeader: false,
  productionBrowserSourceMaps: true,
  cacheHandler: isDocker
    ? join(process.cwd(), "./cache-handler.mjs")
    : undefined,
  cacheMaxMemorySize: isDocker ? 0 : undefined,
  output: isDocker ? "standalone" : undefined,
  images: {
    remotePatterns: [
      // REDACTED
    ],
  },
  async rewrites() {
    return {
      afterFiles: [
        // REDACTED but you can add something simple here
      ],
    };
  },
  async redirects() {
    return [
      // REDACTED but you can add something simple here
    ];
  },
  generateBuildId: async () => {
    return gitHash;
  },
  webpack: (config, { buildId, isServer, webpack }) => {
    /**
     * BUGSNAG
     */
    const appVersion = `${buildId}-${Date.now()}`;
    config.plugins.push(
      new webpack.DefinePlugin({
        // Define the build id so that it can be accessed in the client when reporting errors
        "process.env.BUGSNAG_APP_VERSION": JSON.stringify(appVersion),
        "process.env.NEXT_IS_SERVER": JSON.stringify(isServer),
      })
    );

    // Avoid including '@bugsnag/plugin-aws-lambda' module in the client side bundle
    // See https://arunoda.me/blog/ssr-and-server-only-modules
    if (!isServer) {
      config.plugins.push(
        new webpack.IgnorePlugin({
          resourceRegExp: /@bugsnag\/plugin-aws-lambda/,
        })
      );
    }

    // Upload source maps on production build
    if (
      env.NEXT_PUBLIC_BUGSNAG_API_KEY &&
      env.NEXT_PUBLIC_BUGSNAG_NO_REPORT !== "true" &&
      env.NEXT_PUBLIC_NODE_ENV === "production" &&
      bugsnagUploadSourceMaps
    ) {
      config.plugins.push(
        new BugsnagBuildReporterPlugin(
          {
            apiKey: env.NEXT_PUBLIC_BUGSNAG_API_KEY,
            appVersion,
            releaseStage: env.NEXT_PUBLIC_NODE_ENV,
          },
          { logLevel: "debug" }
        ),
        new BugsnagSourceMapUploaderPlugin({
          apiKey: env.NEXT_PUBLIC_BUGSNAG_API_KEY,
          appVersion,
          publicPath: `REDACTED`,
        })
      );
    }

    /**
     * SVG
     */
    // Configures webpack to handle SVG files with SVGR. SVGR optimizes and transforms SVG files
    // into React components. See https://react-svgr.com/docs/next/
    // This config differs slightly from the example in svgr in order to work with Next.js 13.3 and
    // newer- using this config: https://github.com/vercel/next.js/issues/48177#issuecomment-1557354538

    // Grab the existing rule that handles SVG imports
    // @ts-ignore - rules is a private property that is not typed
    const fileLoaderRule = config.module.rules.find((rule) =>
      rule.test?.test?.(".svg")
    );

    config.module.rules.push(
      // Reapply the existing rule, but only for svg imports ending in ?url
      {
        ...fileLoaderRule,
        test: /\.svg$/i,
        resourceQuery: /url/, // *.svg?url
      },
      // Convert all other *.svg imports to React components
      {
        test: /\.svg$/i,
        issuer: fileLoaderRule.issuer,
        resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
        use: ["@svgr/webpack"],
      },
      // This allows us to load .md files as strings, which then allows our react-markdown
      // component to parse these strings to an AST, which can be consumed by the react
      // components we provide for rendering. This allows us to eliminate the use of 'path'
      // by react-markdown (via treeshaking), which was forcing us to provide a heavy node
      // polyfill
      //
      // Also used for shaders to not have to inline them.
      {
        test: /\.(md|glsl)$/,
        type: "asset/source",
      }
    );

    // Modify the file loader rule to ignore *.svg, since we have it handled now.
    fileLoaderRule.exclude = /\.svg$/i;

    return config;
  },
};

console.log(
  withSentryConfig(withNextVideo(nextConfig), {
    org: "REDACTED",
    project: "REDACTED",
    silent: !process.env.CI,
    widenClientFileUpload: true,
    reactComponentAnnotation: {
      enabled: true,
    },
    tunnelRoute: "/monitoring",
    hideSourceMaps: true,
    disableLogger: true,
  })
);

export default withSentryConfig(withNextVideo(nextConfig), {
  org: "REDACTED",
  project: "REDACTED",
  silent: !process.env.CI,
  widenClientFileUpload: true,
  reactComponentAnnotation: {
    enabled: true,
  },
  tunnelRoute: "/monitoring",
  hideSourceMaps: true,
  disableLogger: true,
});

Steps to Reproduce

When running the next dev server with that config, the console.log is missing the redirects and things like our SVG plugin do no work. Removing withSentryConfig fixes all issues

Relevant Discord Thread: https://discord.com/channels/621778831602221064/1316157899558617161/1316157899558617161

Expected Result

Should work exactly the same with or without withSentryConfig

Actual Result

redirects are missing, I can't inspect the webpack config but it's clearly missing at least the SVG handling

[lforst]

Hi, I think in this case, because your build config is quite complex and I don't see the same behavior in my test app, it would be great to have a minimal reproduction example we can pull. Thanks!

[nahtnam]

@lforst We were able to figure it out. We were using withNextVideo from the next-video library and ultimately it needs to be wrapped like this withNextVideo(withSentryConfig(...)) and not withSentryConfig(withNextVideo(...))