import styles undefined

[HuXin957]

To reproduce:

import styles from './index.less';

Current behavior:

const Home = () => {
  console.log(styles) //undefined
  return (
    <div className={styles.main}>
    </div>
  );
};

 {
      test: /\.less$/,
      use: [
        NODE_ENV ? 'style-loader' : MiniCssExtractPlugin.loader,
        'css-loader',
        'postcss-loader',
        {
          loader: 'less-loader',
          options: {
            lessOptions: {
              modules: true,
              javascriptEnabled: true,
            },
          },
        },
      ],
    }

Expected behavior:
I hope "className= { styles.main }" can work
first, why is that?
secondly, how to fix it?

Environment information:

• less version:4.1.3
• less-loaderversion:11.1.0
• nodejs version:20.11.1
• operating system:mac

[dosubot]

@HuXin957 Hello there! I'm here to help you with your GitHub issues while waiting for a human maintainer. I'm a bot named Dosu, and I can assist you with bug fixes, answer your questions, and guide you on becoming a contributor.

The issue you're encountering where styles is undefined could be due to a few reasons. Here are some steps to troubleshoot and potentially fix the problem:

1. CSS Modules Configuration:
   Ensure that CSS Modules are correctly configured in your css-loader. You need to enable CSS Modules explicitly.

   Update your Webpack configuration to include the modules option in css-loader:

   {
     test: /\.less$/,
     use: [
       NODE_ENV ? 'style-loader' : MiniCssExtractPlugin.loader,
       {
         loader: 'css-loader',
         options: {
           modules: true, // Enable CSS Modules
         },
       },
       'postcss-loader',
       {
         loader: 'less-loader',
         options: {
           lessOptions: {
             javascriptEnabled: true,
           },
         },
       },
     ],
   }

2. Naming Convention:
   Ensure that your class names in the Less file follow the correct naming convention. For example:

   .main {
     // styles
   }

3. File Extension:
   Make sure the file extension of your Less file is correct and matches the import statement. For example, if your file is named index.less, the import should be:

   import styles from './index.less';

4. Check for Errors:
   Look for any errors in the console or terminal that might give more insight into why the styles are not being imported correctly.

If these steps do not resolve the issue, there might be a deeper configuration problem or a compatibility issue with the versions of the tools you are using.

To continue talking to Dosu, mention @dosu.

[HuXin957]

first,thanks. but, that can't solve my problem

[Program-Monkey]

You may need to pay attention to the version of css-loader .
(尝试把 css-loader 切到 6.x 及以下试试)

[Program-Monkey]

As the document write : type namedExport = boolean; Default: Depends on the value of the esModule option. If the value of the esModule options is true, this value will also be true, otherwise it will be false.

My configuration does not explicitly specify the esmodule configuration item as true, but when i add log in the node_mdoules/css-loader/utils.js getModulesOptions, it print the namedExport is true. so i get the import variable is undefined.

When I explicitly specify the namedExport field as false, it runs normally.

According to the document, isn't this field set to false by default ?

[HuXin957]

You may need to pay attention to the version of css-loader . (尝试把 css-loader 切到 6.x 及以下试试)
Yeah,it's a matter of version. thanks,I fixed it