Scss.module webpack error - SPFx 1.19.0

[kofrimpong]

I am having the following error for all scss.module files.

> fast-serve
[11:45:45] Node flags detected: --max-old-space-size=8192
[11:45:45] Respawned to PID: 19216
Build target: DEBUG
[11:45:50] Using gulpfile ~\Projects\spfx-webparts-bundle\gulpfile.js
[11:45:50] Starting 'bundle'...
[11:45:50] Starting gulp
[11:45:50] Starting subtask 'pre-copy'...
[11:45:50] Finished subtask 'pre-copy' after 96 ms
[11:45:50] Starting subtask 'copy-static-assets'...
[11:45:50] Starting subtask 'sass'...
[11:45:54] Finished subtask 'sass' after 4.19 s
[11:45:54] Starting subtask 'lint'...
[11:45:54] [lint] eslint version: 8.7.0
[11:45:54] Starting subtask 'tsc'...
[11:45:54] [tsc] typescript version: 4.7.4
[11:45:54] Finished subtask 'copy-static-assets' after 4.43 s
[11:46:09] Finished subtask 'tsc' after 15 s
[11:46:09] Starting subtask 'save-webpack-config'...
[11:46:09] Finished subtask 'save-webpack-config' after 906 μs
[11:46:11] Finished subtask 'lint' after 17 s
[11:46:11] Starting subtask 'post-copy'...
[11:46:11] Finished subtask 'post-copy' after 270 μs
[11:46:11] Starting subtask 'configure-webpack'...
[11:46:12] Finished subtask 'configure-webpack' after 998 ms
[11:46:12] Starting subtask 'webpack'...
[11:46:26] Finished subtask 'webpack' after 14 s
[11:46:26] Finished 'bundle' after 36 s
[11:46:26] ==================[ Finished ]==================
[11:46:27] Project webparts-bundle version:1.0.0
[11:46:27] Build tools version:3.18.1
[11:46:27] Node version:v18.20.3
[11:46:27] Total duration:40 s
[11:46:37] [fast-serve] To load your scripts, use this query string: ?debug=true&noredir=true&debugManifestsFile=https://localhost:4321/temp/manifests.js
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: https://localhost:4321/, https://[::1]:4321/
<i> [webpack-dev-server] Content not from webpack is served from 'C:\Users\user1\Projects\spfx-webparts-bundle\temp' directory
<i> [webpack-dev-server] 404s will fallback to '/index.html'
<i> [webpack-dev-middleware] wait until bundle finished: /temp/manifests.js
Entrypoint webparts-bundle-web-part 790 KiB = webparts-bundle-web-part.js

ERROR in ./src/webparts/webpartsBundle/components/webpartsBundle.module.scss (./node_modules/spfx-css-modules-typescript-loader/index.js!./node_modules/spfx-fast-serve-helpers/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/clean-css-loader/lib/index.js??ruleSet[1].rules[4].use[3]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[4]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[5]!./src/webparts/webpartsBundle/components/webpartsBundle.module.scss)
Module build failed (from ./node_modules/clean-css-loader/lib/index.js):
TypeError: (0 , schema_utils_1.validate) is not a function
    at Object.cleanCssLoader (C:\Users\user1\Projects\spfx-webparts-bundle\node_modules\clean-css-loader\lib\index.js:36:31)

ERROR in ./src/webparts/webpartsBundle/components/announcement/Announcement.module.scss (./node_modules/spfx-css-modules-typescript-loader/index.js!./node_modules/spfx-fast-serve-helpers/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/clean-css-loader/lib/index.js??ruleSet[1].rules[4].use[3]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[4]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[5]!./src/webparts/webpartsBundle/components/announcement/Announcement.module.scss)
Module build failed (from ./node_modules/clean-css-loader/lib/index.js):
TypeError: (0 , schema_utils_1.validate) is not a function
    at Object.cleanCssLoader (C:\Users\user1\Projects\spfx-webparts-bundle\node_modules\clean-css-loader\lib\index.js:36:31)

ERROR ...... (for all scss.module files)

webpack compiled in 31761 ms
No errors found.

Environment spfx: 1.19.0 npm: 10.7.0 node: 18.20.3 spfx-fast-serve-helpers: 1.19.2

I had the same issue with spfx-fast-serve-helpers: 1.19.0, updating didn't help.

Thanks

[s-KaiNet]

Could you give the sample .scss file where the error is reproducible?

[kofrimpong]

webpartBundle.module.scss

.listItem {
  display: inline;
}

.button {
  height: 88px;
  background-clip: padding-box;
  border: 1px solid transparent;
  margin: 0;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  width: 94px;
  background: transparent;
  &:hover {
    background-color: "[theme:themeLighter, default: #f3f2f1]";
    .label {
      color: "[theme:themePrimary, default: #0078d4]";
    }
    .icon {
      color: "[theme:themePrimary, default: #0078d4]";
    }
  }
}

.flexContainer {
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  height: 100%;
  display: flex;
  text-align: center;
}

.textContainer {
  padding: 10px 6px 0;
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-start;
  width: 100%;
}

.icon {
  font-size: 28px;
  height: 28px;
  line-height: 28px;
  min-height: 28px;
  width: 82px;
  color: #323130;
  svg{
    height: 28px;
  }
}

.label {
  font-size: 12px;
  margin-top: 10px;
  color: #323130;
  font-weight: 400;
  line-height: 17px;
  max-width: 100%;
}

Announcement.module.scss

@import "~@fluentui/react/dist/sass/References.scss";

.announcemement {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: "[theme: newtralLight, default: #eaeaea]";
  .lens {
    transition: transform 0.75s cubic-bezier(0.1, 0.2, 0, 1);
    transform-style: preserve-3d;
    width: 100%;
    height: 100%;
  }
  .announcemementValidations {
    padding-top: 0;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    margin-top: -10px;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
  }

  .announcemementError {
    background-color: $ms-color-neutralLighter;
    border: 1px solid $ms-color-neutralQuaternaryAlt;
    padding: 20px;
    text-align: center;
  }

  .incomplete {
    color: $ms-color-red;
    font-weight: 700;
  }

  .complete {
    color: $ms-color-green;
    font-weight: 700;
  }
}

[devspfx]

Hi, any updates? I have the same problem.

[s-KaiNet]

Have you tried spfx-fast-serve-helpers@1.19.3?

[devspfx]

Have you tried spfx-fast-serve-helpers@1.19.3?

Yes, it's same.

[s-KaiNet]

@devspfx @kofrimpong I cannot reproduce this problem in my environment, but I have some idea what might cause this weired behaviour.

Could you install beta version - npm i spfx-fast-serve-helpers@1.19.5-beta.0 -DE and check if it works for you?

[devspfx]

I just tried it and it's the same. I see how the build works in 5-6-7 seconds, which is very good, but I can't get rid of this error..

[s-KaiNet]

@devspfx could you share your package-lock.json and package.json?

[devspfx]

I attached the files: package.json package-lock.json

[s-KaiNet]

I'm still trying to find the proper fix for this, but meanwhile it looks like the workaround for this issue would be just runing npm i schema-utils@4.2.0 -DE. Could you try it?

[devspfx]

Hi @s-KaiNet , sorry for delay.

Now is working as expected with "schema-utils": "4.2.0". Thank you for your valuable help.

[s-KaiNet]

The issue is fixed in npm i spfx-fast-serve-helpers@1.19.5 -DE