How best to debug/fix sourcemaps not getting generated in a NextJS monorepo using Turbopack

[tosbourn]

Summary

I'm seeing an issue were some sourcemaps aren't getting generated in a NextJS application and I'm not sure how to debug it.

We deploy to Vercel and upload sourcemaps to Sentry, the sourcemaps that get generated successfully upload, but we're missing lots of sourcemaps.

If I enable productionBrowserSourceMaps more sourcemaps are generated, but as the documentation suggests, these files are made available to the browser. We don't want that. Sentry has a config to filesToDeleteAfterUpload but when I tested this, .map files were still accessible.

Additional information

Here is an example of the output from Vercel's build logs;

@company/project:build: ~/0f19a506e2f8f51b.js (no sourcemap found)

@company/project:build: - warning: could not determine a source map reference (Could not auto-detect referenced sourcemap for ~/0f19a506e2f8f51b.js)

@company/project:build: ~/0f52eebdadff9e11.js (no sourcemap found)

@company/project:build: - warning: could not determine a source map reference (Could not auto-detect referenced sourcemap for ~/0f52eebdadff9e11.js)

@company/project:build: ~/0f890dcc8f56cc0a.js (no sourcemap found, debug id 75d86540-2e61-5f66-7231-a00fedc9db28)

...

@company/project:build: - warning: could not determine a source map reference (Could not auto-detect referenced sourcemap for ~/turbopack-9b547cc17f45ef74.js)

@company/project:build: ~/turbopack-b1167f93224968d4.js (no sourcemap found, debug id 6d5c4cd8-ed5c-9a8d-6b57-65e5b46ae2ee)

The vast majority of the failed to find sourcemap are at the root level (~/blah.js)

I'm kind of at a loss for the best way to debug these files not having sourcemaps associated with them, any general guideance would be much appreciated, or if specific issues with the below configs, happy to adjust.

Setup

• Monorepo using Turborepo (2.6.3)
• NextJS 16.0.10
• Typescript 5.8.3
• Sentry/nextjs 9.40

tsconfig file

{
"extends": "@company/tsconfig/base.json",
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules", ".next/types/validator.ts"],
"compilerOptions": {
 "sourceMap": true,
 "outDir": "dist",
 "baseUrl": ".",
  
 "paths": { "variables": ["utils/variables.ts"] },
 
 "moduleResolution": "bundler",
 "target": "ES2015",
 "lib": ["dom", "dom.iterable", "esnext"],
 "allowJs": true,
 "skipLibCheck": true,
 "strict": true,
 "forceConsistentCasingInFileNames": true,
 "noEmit": true,
 "incremental": true,
 "esModuleInterop": true,
 "module": "esnext",
 "resolveJsonModule": true,
 "isolatedModules": true,
 "jsx": "preserve",
 "typeRoots": ["../../node_modules/@types", "./types"],

 "plugins": [
  { "name": "next", "enabled": true },

  {
   "name": "@styled/typescript-styled-plugin",
   "lint": {
    "validProperties": ["container-type"],
    "unknownAtRules": "ignore"
   }
  }]
}

Sentry Webpack options

const SentryWebpackPluginOptions = {
org: "...",
project: "...",
authToken: process.env.SENTRY_AUTH_TOKEN,
silent: !process.env.CI,
widenClientFileUpload: true,
reactComponentAnnotation: { enabled: true },
tunnelRoute: "/sentry-monitoring",
disableLogger: true,
automaticVercelMonitors: true,
};

Relevant lines from nextConfig

const nextConfig = {
reactCompiler: true,
turbopack: {
root: path.join(__dirname, "../.."),
  debugIds: true,
},

compiler: { styledComponents: true },
serverExternalPackages: ["css-tree"],

experimental: {
 esmExternals: true,
 swcPlugins: [["superjson-next", { router: "APP" }]],
 serverActions: { allowedOrigins: [...] },
 optimizePackageImports: ["@mantine/core", "@mantine/hooks"],
 turbopackFileSystemCacheForDev: true,
},

basePath,
productionBrowserSourceMaps: false,
staticPageGenerationTimeout: 100,
...
}

I've also asked over on Stackoverflow

Example

No response

[tosbourn]

I've experimented with enabling productionBrowserSourceMaps and this does create the extra sourcemaps, but they don't get cleaned up post deploy and are available to the browser, which we can't have.

[icyJoseph]

I guess, you can try to have a beforeFiles rewrite for '/:path*.map w/ destination /404 or something like that - and that'll prevent serving the map files.

Or maybe do a post build script, if deploying in Vercel you can add your own build command, so you can go through the .next contents and delete the map files, maybe also drop the source comments 🤔

Not really sure I grasped your issue though, so I am just thinking problem solving w/ code.

[tosbourn]

Thanks @icyJoseph, with productionBrowserSourceMaps false, there are lots of sourcemaps that don't get created, even though our tsconfig should create them.

If I set productionBrowserSourceMaps to true pretty much all the sourcemaps I need are created, but unlike with other settings, where I think the sourcemaps are tidied up after deploy, these ones appear to hang around.

I experimented with Sentry's filesToDeleteAfterUpload but that didn't appear to do anything.

I will look into a post-build script to delete any map file.