css-loader version 7.0.0 or higher doesn't allow to import scss-module styles into React components

[shurikation]

Bug report

Version 7.0.0 or higher of css-loader breaks scss-module import to React component. However, if I use e.g. v.6.11.0, it works correctly.

Actual Behavior

I've configured from scratch a webpack to run a React App. When I was trying to import scss-modules into component, I got an error Cannot read properties of undefined (reading 'btn') ( .btn is a css-class from imported scss-module )

Expected Behavior

Scss-module styles must be applied to the component. Import from module shouldn't be undefined

How Do We Reproduce?

First of all, use css-loader 7.0.0 or higher to catch an error. I only have problems with versions 7+. It's enough to install an older version, e.g. v.6.11.0 so that the import starts working correctly. My configuration:

//package.json
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.23.1"
  },
  "devDependencies": {
    "@types/node": "^20.12.12",
    "@types/react": "^18.3.2",
    "@types/react-dom": "^18.3.0",
    "@types/react-router-dom": "^5.3.3",
    "@types/webpack": "^5.28.5",
    "@types/webpack-bundle-analyzer": "^4.7.0",
    "@types/webpack-dev-server": "^4.7.2",
    "css-loader": "^7.1.1",
    "html-webpack-plugin": "^5.6.0",
    "mini-css-extract-plugin": "^2.9.0",
    "sass": "^1.77.2",
    "sass-loader": "^14.2.1",
    "style-loader": "^4.0.0",
    "ts-loader": "^9.5.1",
    "ts-node": "^10.9.2",
    "typescript": "^5.4.5",
    "webpack": "^5.91.0",
    "webpack-bundle-analyzer": "^4.10.2",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.4"
  }

// MainPage.tsx
import s from './MainPage.module.scss';

const MainPage = () => {
  return (
      <button className={s.btn}>Button Text</button>
  )
}

//MainPage.module.scss
.btn {
  color: blue;
  border: 1px solid red;
}

//global.s.ts
declare module '*.scss' {
  interface IClassNames {
    [className: string]: string
  }
  const classNames: IClassNames;
  export = classNames;
}

// Webpack
  const scssLoader = {
    test: /\.s[ac]ss$/i,
    use: [
      isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
      {
        loader: 'css-loader',
        options: {
          modules: {
            auto: (resPath: string) => Boolean(resPath.includes('.module.')),
            localIdentName: isDev
              ? '[path][name]__[local]--[hash:base64:5]'
              : '[hash:base64:8]',
          },
        },
      },
      'sass-loader',
    ],
  };

Please paste the results of npx webpack-cli info here, and mention other relevant information

  System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 AMD Ryzen 5 3350G with Radeon Vega Graphics
    Memory: 7.47 GB / 13.95 GB
  Binaries:
    Node: 21.1.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.2.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (123.0.2420.97)
    Internet Explorer: 11.0.19041.4355
  Packages:
    css-loader: ^7.1.1 => 7.1.1
    html-webpack-plugin: ^5.6.0 => 5.6.0
    sass-loader: ^14.2.1 => 14.2.1
    style-loader: ^4.0.0 => 4.0.0
    ts-loader: ^9.5.1 => 9.5.1
    webpack: ^5.91.0 => 5.91.0
    webpack-bundle-analyzer: ^4.10.2 => 4.10.2
    webpack-cli: ^5.1.4 => 5.1.4
    webpack-dev-server: ^5.0.4 => 5.0.4