How to upload sourcemaps from NuxtJS to Rollbar

Question

Introduction

Hey, I am trying to upload the sourcemaps generated from webpack to Rollbar. I am using nuxt-rollbar-module inside the modules key to log the errors:

[
      'nuxt-rollbar-module',
      {
        serverAccessToken: process.env.ROLLBAR_SERVER_TOKEN || null,
        clientAccessToken: process.env.ROLLBAR_ACCESS_TOKEN || null,
        config: {
          captureUncaught: true,
          captureUnhandledRejections: true,
          payload: {
            environment: process.env.ROLLBAR_ENV || 'development',
            trace_id: process.env.CODE_VERSION || null,
            client: {
              javascript: {
                code_version: timestamp.buildTimestamp || null,
                guess_uncaught_frames: true
              }
            },
            server: {
              branch: 'main',
              hostname: process.env.DOMAIN || 'https://indiecampers.com'
            }
          }
        }
      }
    ],

I am extending the webpack config for it.

extend(config, { isDev, isClient, isServer }) {
      config.module.rules.push({
        test: /\.json$/i,
        type: 'javascript/auto',
        use: [
          {
            loader: 'json-perf-loader',
            options: {
              limit: 4096
            }
          }
        ]
      })
      // Run ESLint on save
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: [
            /(node_modules)||(.svg$)/,
            path.resolve(__dirname, 'translations')
          ]
        })
      }

      if (!isDev) {
        config.devtool = 'hidden-source-map'
        const rollbarServerAccessToken = process.env.ROLLBAR_SERVER_TOKEN

        // process source map from external bundles
        config.module.rules.push({
          test: /\.js$/,
          enforce: 'pre',
          use: ['source-map-loader'],
          exclude: [/node_modules/]
        })

        // upload source maps to rollbar
        if (rollbarServerAccessToken) {
          config.plugins.push(
            new RollbarSourcemapPlugin({
              accessToken: rollbarServerAccessToken,
              version: timestamp.buildTimestamp,
              ignoreErrors: true,
              publicPath: file =>
                `${
                  process.env.DIST_PATH
                    ? process.env.DIST_PATH + '/' + file
                    : '/_nuxt/' + file
                }`
            })
          )
        }

        // delete source map files
        config.plugins.push(
          new DeleteSourceMapsPlugin({ isServer, keepServerSourcemaps: true })
        )
      }
    }

Code Explanation

To do that I start by

1. setting the config.devtool = 'hidden-source-map' (for production).
2. process source map from external bundles:

config.module.rules.push({
          test: /\.js$/,
          enforce: 'pre',
          use: ['source-map-loader'],
          exclude: [/node_modules/]
        })

3. run the RollbarSourcemapPlugin:

config.plugins.push(
            new RollbarSourcemapPlugin({
              accessToken: rollbarServerAccessToken,
              version: timestamp.buildTimestamp,
              ignoreErrors: true,
              publicPath: file =>
                `${
                  process.env.DIST_PATH
                    ? process.env.DIST_PATH + '/' + file
                    : '/_nuxt/' + file
                }`
            })
          )

4. finally, delete the source maps from the build using DeleteSourceMapsPlugin from webpack:

config.plugins.push(
          new DeleteSourceMapsPlugin({ isServer, keepServerSourcemaps: true })
        )

Problem

So I can upload the source-maps to Rollbar but when I click on the item it shows me this warning and I cannot see the proper stack-trace.

Already tried to use the nuxt-rollbar-module upload feature and did not work. Already tried to use the git sha commit in the version value.