升级css-loader至v7后CSS模块导入返回undefined导致页面报错的问题排查求助

大家好，我有一段之前一直运行正常的代码，今天突然出问题了。我的代码里是这样导入CSS模块的：

import styles from '../css/basic-styles.module.css';
<div className={styles.wrapper}>

今天我用ncu工具更新了依赖库，其中css-loader从^6.7.3升级到了^7.1.0，之后控制台就开始报错：

TopPage.js:2811 Uncaught TypeError: Cannot read properties of undefined (reading 'wrapper')
    at TopPage (TopPage.js:2811:86)

我特意加了测试代码，发现导入的styles居然是undefined：

import styles from '../css/basic-styles.module.css';
console.log(styles) // undefined.

下面是我的webpack.config.js配置：

const path = require("path");
const webpack = require("webpack");

module.exports = {
   entry: "./src/index.js",
   output: {
       path: path.resolve(__dirname, "./static/frontend"),
       filename: "[name].js",
   },

   module: {
       rules: [
           {
               test: /\.js$/,
               exclude: /(node_modules|bower_components)/,
               use: {
                   loader: "babel-loader",
                   options: {
                    presets: ['@babel/preset-react', '@babel/preset-env']
                  }
               },
            },
            {
                test: /\.css/,
                use: [
                    "style-loader",
                    {
                        loader: 'css-loader'
                    }
                ]
            },
            {
                test: /\.(png|jpg|gif|svg|fbx|obj|mtl)/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            //[name]是图片名、[ext]是扩展名
                            name: 'images/[name].[ext]'
                        }
                    }
                ]
            }
       ],
   },
   optimization: {
       minimize: true,
   },
   plugins: [
       new webpack.DefinePlugin({
           'process.env.NODE_ENV' : JSON.stringify('development')
       })
   ]
}

我的CSS文件内容大概是这样的：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
 
}

h1 {
  text-align: center;
  margin: 2rem 0 4rem 0;
}
.btnSeparator{
  height:30px
}

.overlayConfirmAlert{
  z-index: 10001;
}
.drawingSuggests{
  overflow-y:auto;
 
  height:calc(100vh - 335px);
}

请问大家我应该从哪些方面排查这个问题呢？

备注：内容来源于stack exchange，提问作者whitebear