I am currently building my angular project via webpack with source-map-loader to extract source maps, like so:

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        enforce: "pre",
        use: ["source-map-loader"],
      },
    ],
  },
};

This works fine with my Angular 11 build. Once I upgrade my angular packages to Angular 12, I begin to get the following error:

Module build failed (from ./node_modules/source-map-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (./node_modules/source-map-loader/dist/index.js:21:24)

Removing this section from my webpack module allows the build to succeed but I am no longer extracting the source maps, causing my bundle to increase in size.

I have tried upgrading source-map-loader to latest version and did not change the error. I have dug into the node_module and it is complaining about this section of code:

async function loader(input, inputMap) {
  const options = this.getOptions(_options.default);

I have seen may other questions on here in regards to sass-loader and other style loaders for Vue but this is for Angular and is mad about extracting source maps.

There are some breaking changes when going to Angular 12 but upgrading to webpack 5.0.0 did not seem to make a difference

What are some other things I can do to debug this?