Error compiling SASS files in Next.js 12.0.4 / next-transpile-modules 9.0.0

[AndreSilva1993]

• [x] I HAVE READ THE FAQ AND MY PROBLEM WAS NOT DESCRIBED THERE
• [x] I WILL GIVE 10$ TO CHARITY IF MY SOLUTION WAS ACTUALLY IN THE README/FAQ

Are you trying to transpile a local package or an npm package? Packages that are in private registries.

Describe the bug In the previous version of Next.js / next-transpile-modules the following configuration file would build the app successfully and now upgrading both dependencies to the latest ones, the SCSS files are not compiled as they should.

const fs = require('fs');
const path = require('path');

const withPlugins = require('next-compose-plugins');
const withTranspileModules = require('next-transpile-modules');
const bundleAnalyzer = require('@next/bundle-analyzer');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const configuration = require('./environment-configuration');

const nextConfig = {
  webpack(config, { isServer }) {
    if (!isServer) {
      config.module.rules.push({
        test: /\.s[ac]ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              implementation: require('sass'),
            },
          },
        ],
      });
    }
    config.plugins.push(
      new MiniCssExtractPlugin({
        filename: 'static/boss-assets/[id]-[contenthash].css',
      }),
    );

    return config;
  },
};

module.exports = withPlugins(
  [
    withTranspileModules(
      fs
        .readdirSync('./node_modules/@boss')
        .map(bossModule => `@boss/${bossModule}`)
    ),
    bundleAnalyzer({ enabled: process.env.ANALYZE === 'true' }),
  ],
  nextConfig
);

Setup

• Next.js version: 12.0.4
• next-transpile-modules version: 9.0.0
• Node.js version: 14.18.1
• npm/yarn version: NPM x8.0.0
• Operating System: macOS Big Sur 11.6
• Webpack 4 or 5: 5

Additional context So this is impossible to create a reproducible repository since the modules I'm trying to transpile live in private registries but the thing that I find odd is the error message since it appears that now to transpile SASS files the built-in Next.js loaders are being used as well? On Next.js 11.x and next-transpile-modules 8.x this setup worked and now it just breaks in every Sass file.

Also the file that is being errored out is this one - which contains valid SCSS.

.ar-button {
  display: inline-flex;
  max-width: 100%;

  &__content {
    white-space: nowrap;
    overflow: hidden;
  }
}

So this leads me to believe that the issue lies in having two css-loaders and two mini-css-extract-plugin apparently being used.