webpack-contrib / style-loader

Style Loader
MIT License
1.65k stars 473 forks source link

CSS Module is not working. #628

Closed sachin-walunj closed 5 months ago

sachin-walunj commented 5 months ago

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 commented 5 months ago

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