this.getOptions is not a function when try to launch NextJS app

• Operating System: OSX 11.3 beta
• Node Version: 12.19.0
• NPM Version: 6.14.8
• webpack Version: 4.41.2
• source-map-loader Version: 2.0.1

Expected Behavior

When I run my NextJS app, should bundle and link the sources map and finally run the app successfully.

Actual Behavior

NextJS app is not launched successfully with runtime errors when try to run source-map-loader:

error - ../node_modules/next/node_modules/@next/react-refresh-utils/runtime.js
TypeError: this.getOptions is not a function

Code

This is the current implementation for next.config.js

module.exports = {
  webpack: (config, options) => {
    // Note: we provide webpack above so you should not `require` it
    // Perform customizations to webpack config
    // Load source maps in dev mode
    if (config.mode === "development") {
      config.module.rules.push({
        test: /\.js$/,
        use: ["source-map-loader"],
        enforce: "pre",
      });
    }

    config.plugins.push(new options.webpack.IgnorePlugin(/\/__tests__\//));

    // Important: return the modified config
    return config;
  },
};

How Do We Reproduce?

Yo need to create a boilerplate app with NextJS and install source-map-loader and create a next.config.js by simply running the follow commands:

npx create-next-app nextjs-example --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"

and install the dependency:

npm i -D source-map-loader

and create a next.config.js at the root the project and copy the code above and run:

npm run dev

and you’ll be able to reproduce this error. It looks like source-map-loader is not able to access webpack context or whatever the getOptions method is located.

[alexander-akait]

You need webpack v5 to use latest version of sourcer-map-loader

[arielnmz-iws]

How can I make CRACO use webpack 5?