Next.js Turbopack Support

[ryanolson-aumni]

⚠️ This original post has been edited by @lforst to reflect the current status of Turbopack Support ⚠️

Important

This issue is tracking progress on Turbopack Support. If you find bugs or problems with the Sentry SDK in combination with Turbopack please open a separate issue. Thank you!

Problem Statement

Sentry should work in combination with Turbopack with all of its features.

Current Status (Last Update Nov 6, 2024)

Feature	Support	Notes
Next.js app compiles and runs without issues	✅
Server-side instrumentation	✅
Client-side instrumentation	❌	Doable with a little bit of setup - slightly/very hacky - needs documentation
Source Maps	❌	- Needs onBuildEnd hook implemented in Next.js - Needs way to inject debug IDs into bundles implemented in Next.js
React Component Name Annotations	❌	- Needs way to transform code in Next.js
Release Injection	❌	As a user you probably don't care about this one, but it will become relevant once Turbopack prod builds are a thing. We will likely solve this with v9 of the SDK (coming Jan 2025).

[smeubank]

Hi @ryanolson-aumni

We are also eager to add support here!

We have 2 plugin repos to add support for webpack, esbuild, rollup, and vite. The latter 3 we support via an opensource project where we'd love to see support so we could potentially adopt it via our usage of their adapters. Upvote the issue there as well. Although I do not think it is on their immediate radar either. unjs/unplugin#302

https://github.com/getsentry/sentry-webpack-plugin

https://github.com/getsentry/sentry-javascript-bundler-plugins

[mdugue]

any news on this?

[lforst]

@mdugue We'll tackle turbopack when it becomes somewhat stable.

[smeubank]

any news on this?

Fwiw I would also encourage you to upvote and comment on this issue which wr could also use to provide support similar to webpack, vite, esbuild and rollup

unjs/unplugin#302

[lforst]

Update

As of now, we cannot transfer the functionality we currently have in the SDK to Turbopack:

Turbopack loaders are not passed transpiled javascript, instead, they are passed the original user code. The SDK needs transpiled JS to properly be able to do transformations to modules. We could transpile the user code ourselves but that is fragile AF - so not an option.

As of now, the SDK will continue to work in production mode which is arguably more important, but we would like to support dev mode.

Branch with my experiments: #9295

[Stanzilla]

Update

As of now, we cannot transfer the functionality we currently have in the SDK to Turbopack:

Turbopack loaders are not passed transpiled javascript, instead, they are passed the original user code. The SDK needs transpiled JS to properly be able to do transformations to modules. We could transpile the user code ourselves but that is fragile AF - so not an option.

As of now, the SDK will continue to work in production mode which is arguably more important, but we would like to support dev mode.

Branch with my experiments: #9295

To clarify, does it work with Turbopack in production mode as-is or only with the changes in your branch?

[lforst]

@Stanzilla Turbopack will not work with the SDK (dev and prod). My branch does not contain any fixes or features, just experiments proving that things don't work.

[leerob]

It's also worth noting that the initial Turbopack support is for next dev, which is only for your local environment. next build support will come later 🙏

[guhur]

@mdugue We'll tackle turbopack when it becomes somewhat stable.

It become stable now at the beginning of the month. Would love to integrate it with sentry now :-)

[lforst]

@guhur We are actively working on it. Tubopack may be stable but it still doesn't support a lot of features the SDK needs. You can use turbopack at any time with Sentry. Sentry just won't work well in dev mode. Turbopack for prod builds is still not stable.

[TheCukitoDev]

Hello, i got an error while running just pnpm dev --turbo on Next.js 15 with Sentry. This is the error:

⚠ ./node_modules/.pnpm/@[email protected]/node_modules/@sentry/node/build/cjs/sdk
Package import-in-the-middle can't be external
The request import-in-the-middle matches serverExternalPackages (or the default list).
The request could not be resolved by Node.js from the project directory.
Packages that should be external need to be installed in the project directory, so they can be resolved from the output files.
Try to install it into the project directory by running npm install import-in-the-middle from the project directory.

I did pnpm add import-in-the-middle to install the package but it doesen't makes anything

EDIT:
It don't make any compiling error but i think it should not be there

[spyl94]

@TheCukitoDev I have fixed this issue by adding serverExternalPackages: ['@sentry/node', '@sentry/nextjs'] in my next.config.js

[lforst]

@spyl94 @TheCukitoDev please don't externalize the SDK. That will break it in all kinds of ways potentially. Instead add an override for your package manager to only have one import-in-the-middle package version in your dependencies. In theory Next.js shouldn't crash though.

[TheCukitoDev]

It is my mistake sorry. I added require-in-the-middle instead of import-in-the-middle but I thought it was what it tells me the error to.
Sorry.

[TheCukitoDev]

Again Sorry. I made a mistake. When using react 18 it needs to use import-in-the-middle but when using the actual RC of React that next supports it needs require-in-the-middle so it is the confussion. Sorry again but I think now is clear and anyone with the same issue can solve it.