sentry-javascript: "SentryWebpackPlugin is not a constructor" error during Next 14 build

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

7.103.0

Framework Version

Next 14.1.0

(also using Expo 50)

Link to Sentry event

No response

SDK Setup

No response

Steps to Reproduce

next.config.js with

const withFonts = require('next-fonts');
const { withExpo } = require('@expo/next-adapter');
const { withSentryConfig } = require('@sentry/nextjs');

const nextConfig = {
    // We always want source maps for Sentry
    productionBrowserSourceMaps: true,
    sentry: {
        hideSourceMaps: true,
        widenClientFileUpload: true
    },
    reactStrictMode: false,
    swcMinify: true,
    redirects,
    env: {
        // For web, Vercel gives us the commit sha in VERCEL_GIT_COMMIT_SHA
        NEXT_PUBLIC_SENTRY_RELEASE: process.env.VERCEL_GIT_COMMIT_SHA,
    },
    transpilePackages: [
        '@react-native/assets-registry',
        'expo',
        'expo-apple-authentication',
        'expo-application',
        'expo-asset',
        'expo-constants',
        'expo-device',
        'expo-font',
        'expo-linear-gradient',
        'expo-location',
        'expo-modules-core',
        'expo-notifications',
        'react-native',
        'react-native-maps',
        'react-native-safe-area-context',
        'react-native-svg',
        'react-native-url-polyfill',
        'react-native-web',
        'sentry-expo'
    ],
    experimental: {
        forceSwcTransforms: true
    }
};

module.exports = withSentryConfig(withExpo(withFonts(nextConfig)), {});

Run

next build

Expected Result

Finish the next build

Actual Result

TypeError: SentryWebpackPlugin is not a constructor
--
09:22:48.728 | at Object.newWebpackFunction [as webpack] (/vercel/path0/node_modules/@sentry/nextjs/cjs/config/webpack.js:399:13)
09:22:48.728 | at getBaseWebpackConfig (/vercel/path0/node_modules/next/dist/build/webpack-config.js:1775:32)
09:22:48.728 | at async Promise.all (index 1)
09:22:48.728 | at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:151:20)
09:22:48.729 | at async webpackBuildImpl (/vercel/path0/node_modules/next/dist/build/webpack-build/impl.js:133:21)
09:22:48.729 | at async /vercel/path0/node_modules/next/dist/build/index.js:828:115
09:22:48.729 | at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:151:20)
09:22:48.729 | at async build (/vercel/path0/node_modules/next/dist/build/index.js:374:9)
09:22:48.729 | at async main (/vercel/path0/node_modules/next/dist/bin/next:155:5)
09:22:48.766 | Error: Command "next build" exited with 1

I was able to fix my build with the following patch:

diff --git a/node_modules/@sentry/nextjs/cjs/config/webpack.js b/node_modules/@sentry/nextjs/cjs/config/webpack.js
index 1f3c4e6..7cf0c4e 100644
--- a/node_modules/@sentry/nextjs/cjs/config/webpack.js
+++ b/node_modules/@sentry/nextjs/cjs/config/webpack.js
@@ -390,13 +390,13 @@ function constructWebpackConfigFunction(
         // without, the option to use `hidden-source-map` only applies to the client-side build.
         newConfig.devtool = userSentryOptions.hideSourceMaps && !isServer ? 'hidden-source-map' : 'source-map';
 
-        const SentryWebpackPlugin = utils.loadModule('@sentry/webpack-plugin');
+        const SentryWebpackPlugin = utils.loadModule('@sentry/webpack-plugin').default;
         if (SentryWebpackPlugin) {
           newConfig.plugins = newConfig.plugins || [];
           newConfig.plugins.push(new SentryCliDownloadPlugin());
           newConfig.plugins.push(
             // @ts-expect-error - this exists, the dynamic import just doesn't know about it
-            new SentryWebpackPlugin(
+            SentryWebpackPlugin(
               getWebpackPluginOptions(buildContext, userSentryWebpackPluginOptions, userSentryOptions),
             ),
           );
@@ -1066,7 +1066,7 @@ let downloadingCliAttempted = false;
 class SentryCliDownloadPlugin  {
    apply(compiler) {
     compiler.hooks.beforeRun.tapAsync('SentryCliDownloadPlugin', (compiler, callback) => {
-      const SentryWebpackPlugin = utils.loadModule('@sentry/webpack-plugin');
+      const SentryWebpackPlugin = utils.loadModule('@sentry/webpack-plugin').default;
       if (!SentryWebpackPlugin) {
         // Pretty much an invariant.
         return callback();

I assume that a better solution would include some sort of fallback or conditional check (perhaps this is caused by using swc transforms vs babel, etc. etc. etc.) but this patch works for my use case.