CSS Module is not working.

[sachin-walunj]

Bug report

Cannot read properties of undefined (reading 'container')
I am using css module
import React from 'react'
import styles from './_screen-loader.module.scss'

type ScreenLoaderProps = {
logo: string
app: string
}

console.log(styles, 'styles') -> return undefine

const ScreenLoader = (): JSX.Element => {
   return (
     <div className=**{styles.container}**>
       <p>Hello</p>
     </div>
  )
 }

export default ScreenLoader

Actual Behavior

style is undefined here after upgrading to latest css-loader and style-loader.

Expected Behavior

style should be applied to the div.

How Do We Reproduce?

this is my webpack.config.file

module: {
   rules: [
     {
       test: /\.(jpg|png)$/,
       exclude: /node_modules/,
       loader: 'asset/resource',
     },
     {
       test: /\.svg$/,
       exclude: /node_modules/,
       use: 'svg-react-loader',
     },
     {
       test: /\.module\.scss$/,
       exclude: /node_modules\/(?!@patterninc\/react-ui).*/,
       // format system needs style-loader because when you import a module, it needs to inject the CSS itself as well. and minicssextractplugin doesn't do that by default
       use: [
         'style-loader',
         {
           loader: 'css-loader',
           options: {
             modules: {
               auto: /\.module\.s?css$/,
               localIdentName: '[name]__[local]__[hash:base64:5]',
             },
           },
         },
         'sass-loader',
       ],
     },
   ],
 },

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

System:
OS: macOS 14.4.1
CPU: (10) arm64 Apple M1 Pro
Memory: 321.64 MB / 16.00 GB
Binaries:
Node: 21.6.1 - /opt/homebrew/bin/node
Yarn: 1.22.21 - /opt/homebrew/bin/yarn
npm: 9.6.4 - /opt/homebrew/bin/npm
Browsers:
Brave Browser: 123.1.64.116
Chrome: 123.0.6312.107
Safari: 17.4.1
Packages:
babel-loader: ^9.1.3 => 9.1.3
clean-webpack-plugin: ^4.0.0-alpha.0 => 4.0.0
copy-webpack-plugin: ^12.0.2 => 12.0.2
css-loader: ^7.1.0 => 7.1.0
fork-ts-checker-webpack-plugin: ^9.0.2 => 9.0.2
html-webpack-plugin: ^5.6.0 => 5.6.0
optimize-css-assets-webpack-plugin: ^6.0.0 => 6.0.1
sass-loader: ^14.1.1 => 14.1.1
style-loader: ^4.0.0 => 4.0.0
webpack: ^5.90.3 => 5.91.0
webpack-cli: ^5.1.4 => 5.1.4
webpack-dev-server: ^5.0.2 => 5.0.4
webpack-merge: ^5.10.0 => 5.10.0

[alexander-akait]

Please use import * as styles from './_screen-loader.module.scss', named export used for CSS modules classes by default right now, please read migration guide before update to major release, thank you