blitz-js / blitz-js/next-superjson-plugin

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

Open
#108 1 comment 0 reactions 0 assignees View on GitHub
bug
Dominant language
Rust
Stars
216
Forks
13
PR merge metrics
No merged PRs in 30d

Description

### Verify Next.js canary release

- [X] 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

> sentry-test@0.1.0 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

```javascript
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_

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.