SCSS css-loader module build fail

[xavisegura]

After updating spfx to 1.19.0 and spfx-fast-serve-helpers to the latest 1.19.1, I'm getting the same error for every .scss file:

Example:

ERROR in ./src/webparts/oneIntranetSearchResults/OneIntranetSearchResultsWebPart.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/oneIntranetSearchResults/OneIntranetSearchResultsWebPart.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\jsegura1\source\repos\ES - One Intranet\node_modules\clean-css-loader\lib\index.js:36:31)

Since gulp serve command works and application launches properly, is this related to spfx-fast serve? Thanks a lot in advance for your support.

[s-KaiNet]

Could you share the content of one of the .scss where the problem happens?
Also, have you tried removing node_modules, package-lock.json and reinstalling dependencies? Sometimes it helps in resolving strange errors.

[xavisegura]

Sure, here the contents of the second file in the screenshot: Ads.module.scss:

@import '~office-ui-fabric-react/dist/sass/References.scss';
$ms-color-neutrallight: '[theme: neutralLight, default: #eaeaea]';
$ms-color-themePrimary: '[theme: themePrimary, default: #00338D]';
.ads {
  margin-left: 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border-radius: 2px;
  outline: 1px solid;
  outline-color: $ms-color-neutrallight;
  border:none;

  .advertisementText {
    flex: 1;
    margin: 16px 0px;
    line-height: 1.5;
  }
  .advertisementTextContainer {
    padding: 20px;
  }

  .smallAdsTopRow {
    display: flex;
    align-items: center;
  }
  .smallAdsIcon {
    width: 80px;
    height: 80px;
    margin-inline-end: 8px;
    border-radius: 8px;
    object-fit: cover;
  }
  .smallAdsTitle {
    flex: 1;
    font-size: 22px;
  }
  .smallAdsLink {
    text-decoration: none;
  }
  .largeAdsRow {
    border-radius: 2px 2px 0 0;
    object-fit: contain;
    width: 100%;
    max-width: 448;
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      min-height: 1px;
    }
  }
  .largeAdsTitle {
    font-size: 22px;
  }
  .widgetFooter {
    color: #424242;
    white-space: pre-wrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .widgetFooterLink {
    text-decoration: none;
    text-align: end;
    width: 100%;
    margin-top: 10px;
  }
  .link {
    color: $ms-color-themePrimary;
    font-size: 12px;
  }
}

Removed node_modules and package-lock, executed npm install, same errors:

[s-KaiNet]

I cannot reproduce it with your .scss file. Do you have any custom Webpack extensibility with build.configureWebpack.mergeConfig inside gulpfile.js?

[xavisegura]

Thanks, yes I have some. Let me try then to identify which one is causing it and will write back on Monday max. Thanks a lot for the great support and have a nice weekend.

[xavisegura]

I was able to pinpoint the origin of the issue. It was not caused by any custom Webpack extensibility configuration. It was due to a misconfiguration on the version of schema-ultils npm package.

Installing as a dev dependency schema-utils latest v4.2.0 solved the issues and fast serve is back working as it was in previous spfx version.

Thanks a lot for the support and what you do for the community!