Source is not browsable with Next.js + Typescript + WebpackObfuscator despite uploaded sourcemaps

[lerela]

Hello,

I have a Next.js + Typescript + Webpack Obfuscator project and I am trying to get the source displayed in Sentry when there is an error.

I have configured TS (tsconfig.json) to create source maps:

    "sourceMap": true,
    "inlineSources": true,
    "sourceRoot": "/",

I have configured WebpackObfuscator to output the source maps:

      config.plugins.push(
        new WebpackObfuscator(
          {
            stringArrayCallsTransform: true,
            sourceMap: true,
          },
          [],
        ),
      );

I also added productionBrowserSourceMaps: true, to Next configuration in next.config.js and that's how I configured Sentry:

  include: ['.next', 'dist'],
  ignore: ['node_modules', 'webpack.config.js', 'cypress', 'test'],
  urlPrefix: '~/_next',

But when there is a server error, the frame path does not match anything Sentry knows:

For instance, my source file is src/pages/dashboard/test/index.tsx, which gets transpiled to .next/server/pages/dashboard/test.js. Yet, if there is an exception (server side), I see that Sentry does not find the source:

❯ sentry-cli sourcemaps explain  a1f3aa52e9974fbd965af5721e35dc5d
✔ Fetched data for event: a1f3aa52e9974fbd965af5721e35dc5d
✔ Event has release name: S3lQP8VcjBwu7RhoY0CJj
✔ Event has a valid exception present
✔ Event has a valid stacktrace present
✖ Uploaded artifacts do not include entry: ~/_next/server/pages/dashboard/webpack:/package-name/src/pages/dashboard/test/index.tsx

However source maps are properly uploaded to Sentry:

I cannot really make sense of the stack trace filename in two parts, and I am not sure where to dig next. I have tried to use the RewriteFrame integration to override the prefix (with ~/next/server) but it does not work, as the directory structure seems to disappear (notice that src/pages/dashboard/test is gone):

Any clue would be greatly appreciated.

Thanks!