Recently, I ran into a frustrating issue while experimenting with Turbo in a Next.js 14.2 project. We were eager to try Turbo to improve developer experience (DX), but our excitement quickly faded when we noticed that HMR wasn’t working reliably. About half the time, making a change would cause the app to crash.
The Problem
When we made code edits, updated environment variables, or triggered HMR, our app would crash with an error like this:
Error: Module [project]/node_modules/next/dist/esm/client/components/error-boundary.js was instantiated because it was required from module…
Why (we think) it happened?
This crash happened because Turbo’s HMR system and Sentry’s instrumentation were conflicting. Turbo reloads code differently than Webpack, and Sentry’s setup wasn’t fully compatible with it yet.
The Fix: Adjusting Instrumentation for Turbo
To fix the issue, you need to modify your instrumentation setup so Sentry doesn’t load when Turbo is active.
Add a check for the TURBOPACK environment variable to skip Sentry’s configuration when Turbo is enabled:
// next.config.js
if (!process.env.TURBOPACK) {
const { withSentryConfig } = require('@sentry/nextjs');
module.exports = withSentryConfig(module.exports, { });
}
In your instrumentation.ts file, add logic to skip loading Sentry’s instrumentation if Turbo is active:
if (process.env.TURBOPACK) {
return;
}