Typescript + webpack cannot build scss module

Question

I have the typescript, webpack and scss working properly, and want to bring it to the next level by enabling modules. Here is what I have:

in declaration.d.ts:

declare module '*.module.scss' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

In webpack.config.js:

{
        test: /.module.(sass|scss)$/,
        exclude: /node_modules/,
        use: [
          'style-loader',
          'css-modules-typescript-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
            },
          },
          'sass-loader',
        ],
      },

And then in the test.module.scss, I have:

.testStyle {
    color: red;
}

Finally in the .tsx code:

import styles from './test.module.scss';

<div className={styles.testStyle}>hello</div>

However when I try to build it, it start giving me weird error:

ERROR in ./src/ui/test.module.scss (./node_modules/css-modules-typescript-loader/index.js!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/ui/test.module.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
  ╷
2 │       import API from "!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
  │                                                                                                        ^
  ╵
  src\ui\test.module.scss 2:104  root stylesheet
SassError: SassError: expected "{".
  ╷
2 │       import API from "!../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
  │                                                                                                        ^
  ╵
  src\ui\test.module.scss 2:104  root stylesheet
    at Object.loader (C:\dev\codes\dsde\frontend-dsde\node_modules\sass-loader\dist\index.js:69:14)
 @ ./src/ui/test.module.scss 8:6-417 22:17-24 26:0-387 26:0-387 27:22-29 27:33-47 27:50-64
 @ ./src/ui/test.tsx 2:0-54 3:73-94
 @ ./src/index.tsx 7:0-55 79:43-57

My hinge is the loaders didn't work properly, but I don't see anything wrong with my webpack config...