Webpack 配置module.css报错Uncaught TypeError: Cannot read properties of undefined

我的项目结构如下:

入口文件是index.jsx，组件Button.jsx使用了样式button.module.css

.btn {
    background-color: #4CAF50;
  border: none;
  color: white; 
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.btn:hover {
  background-color: #3e8e41;
}   

.btn:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

我在webpack.config.js配置如下：

const path = require('path');

module.exports = {
  entry: './src/index.jsx', // 入口文件
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.css$/, // 匹配css文件，或者修改为/\.moudle.css$/，只匹配后缀.module.css
        use: [
              'style-loader', // 将 JS 字符串生成为 style 节点
              {
                  loader: 'css-loader',
                  options: {
                      modules: true // 启用 CSS 模块
                  }
              }
          ]
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'), // 将 contentBase 替换为 static
    },
    compress:true,
    open: true,
    port: 5173,
    hot: true,
  },
  mode: 'development' // 开发模式
};

Button,jsx:

import React from'react';
import styles from './styles/button.module.css'


const Button = ({ text, onClick }) => {
  return (
    <button className={styles.btn} onClick={onClick}>
      {text}
    </button>
  );    
};

export default Button;

但是运行时却报错:Uncaught TypeError: Cannot read properties of undefined (reading 'btn')

我根据网络上的解决方法，

清除缓存，重新安装

npm cache clean --force
npm install style-loader@latest
npm install css-loader@latest

都无法解决。

于是认真思考：因为报错信息没有包含类似”cannot find module 'button.module.css'“，”style-loader“....，且npm命令行没有任何报错，所以可以断定css-loader和style-loader是正确安装并启动了的。

我又尝试在Button.jsx里点击了css的路径，可以正常跳转到css文件，说明路径引用也没有错误。

import styles from './styles/button.module.css'

尝试输出

console.log(styles)

结果是undefined。很奇怪，明明引用了却无法读取css类名。

试着将css的引用语句，替换为：

const styles = require('./styles/button.module.css')

搞定：