Adding next-superjson-plugin + sentry breaks latest nextjs 14 builds

[Finkes]

Verify Next.js canary release

• I verified that the issue exists in the latest Next.js canary release

Describe the bug

Installing next-superjson-plugin for next.js plus sentry (https://sentry.io/) breaks the next.js build.

1. git clone https://github.com/Finkes/sentry-superjson-error
2. npm install
3. npm run build

npm run build

> [email protected] build
> next build

  ▲ Next.js 14.2.8
  - Experiments (use with caution):
    · swcPlugins
    · instrumentationHook

   Creating an optimized production build ...
Failed to compile.

./src/app/sentry-example-page/page.tsx
Module parse failed: Unexpected token (59:32)
File was processed with these loaders:
 * ./node_modules/@sentry/nextjs/build/cjs/config/loaders/wrappingLoader.js
 * ./node_modules/next/dist/build/webpack/loaders/next-flight-client-module-loader.js
 * ./node_modules/next/dist/build/webpack/loaders/next-swc-loader.js
 * ./node_modules/unplugin/dist/webpack/loaders/transform.js
You may need an additional loader to handle the result of these loaders.
|                     /*#__PURE__*/ _jsx(SuperJSONComponent, {
|                         props: serialize({
>                             data-sentry-element: "ClientPage",
|                             data-sentry-source-file: "page.tsx"
|                         }),

Import trace for requested module:
./src/app/sentry-example-page/page.tsx


> Build failed because of webpack errors

Expected behavior

the build should work

Reproduction link

https://github.com/Finkes/sentry-superjson-error

Version

latest

Config

import { withSentryConfig } from "@sentry/nextjs";

/** @type {import("next").NextConfig} */
const nextConfig = {
  experimental: {
    swcPlugins: [["next-superjson-plugin", {
      excluded: ["data-sentry-element", "data-sentry-source-file"]
    }]]
  }
};

export default withSentryConfig(nextConfig, {
// For all available options, see:
// https://github.com/getsentry/sentry-webpack-plugin#options

  org: "my-org",
  project: "javascript-nextjs",

// Only print logs for uploading source maps in CI
  silent: !process.env.CI,

// For all available options, see:
// https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/

// Upload a larger set of source maps for prettier stack traces (increases build time)
  widenClientFileUpload: true,

// Automatically annotate React components to show their full name in breadcrumbs and session replay
  reactComponentAnnotation: {
    enabled: true
  },

// Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
// This can increase your server load as well as your hosting bill.
// Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
// side errors will fail.
  tunnelRoute: "/monitoring",

// Hides source maps from generated client bundles
  hideSourceMaps: true,

// Automatically tree-shake Sentry logger statements to reduce bundle size
  disableLogger: true,

// Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
// See the following for more information:
// https://docs.sentry.io/product/crons/
// https://vercel.com/docs/cron-jobs
  automaticVercelMonitors: true
});

Additional context

No response

[Finkes]

Workaround: Disabling reactComponentAnnotation fixes the issue for me.

  reactComponentAnnotation: {
    enabled: false // setting this to true will break the build
  }