How to setup source map on Sentry

I'm using Sentry for error reporting on the React app that I created.

The problem with it is that I don't have an idea how to debug certain issues because I don't know what's the exact file the error occurred in:

I'm using Laravel mix for compiling. The webpack.mix.js looks like this:

mix
  .react("resources/js/checkout/CheckoutRoot.js", "public/js")
  .version();

I tried using sourceMaps() like so:

const productionSourceMaps = true;

mix
  .react("resources/js/checkout/CheckoutRoot.js", "public/js")
  .react("resources/js/checkout/DonationRoot.js", "public/js")
  .version()
  .sourceMaps(productionSourceMaps, "source-map")

But it doesn't seem to work. It appended this right below the file when viewing in Chrome dev tools:

//# sourceMappingURL=27.js.map?id=c4f9bf41f206bfad8600

But when I pretty print it still results in the same gibberish:

I'm expecting to see it point out to the component file I'm working on locally. Is that possible?

Update

I tried installing Sentry's webpack plugin:

const SentryWebpackPlugin = require("@sentry/webpack-plugin");

let config = {
  output: {
    publicPath: "/",
    chunkFilename: "js/chunks/[name].js?id=[chunkhash]",
  },
  plugins: [
    new SentryWebpackPlugin({
      // sentry-cli configuration
      authToken: "MY_AUTH_TOKEN",
      org: "MY_ORG",
      project: "MY_PROJECT",
      release: "MY_RELEASE",

      include: ".",
      ignore: ["node_modules", "webpack.config.js"],
    }),
  ],
};

Used the same release when initializing Sentry on my source file:

Sentry.init({
  dsn: "MY_DSN",
  release: "testing",
});

Put some failing code:

useEffect(() => {
  console.bog("MY_RELEASE");
}, []);

Then compiled like usual:

npm run production

I triggered the error on the browser and I got the expected file in there (MobilePayment.js):

But from Sentry, all I get is this:

I would expect to find MobilePayment.js in there but there's none. When compiling, I got this:

So I assume it uploaded the sources to Sentry.

I even tried the same thing using Sentry-cli:

sentry-cli releases files release upload-sourcemaps --ext js --ext map /path/to/public/js

And it pretty much did the same thing:

I then triggered the same error. But I still got the same output from Sentry dashboard. Please help.

from How to setup source map on Sentry