Scss.module webpack error - SPFx 1.19.0
kofrimpong opened this issue · 12 comments
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
Could you give the sample .scss file where the error is reproducible?
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;
}
}
Hi, any updates? I have the same problem.
Have you tried spfx-fast-serve-helpers@1.19.3?
Have you tried spfx-fast-serve-helpers@1.19.3?
Yes, it's same.
@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?
I attached the files:
package.json
package-lock.json
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?
Hi @s-KaiNet , sorry for delay.
Now is working as expected with "schema-utils": "4.2.0".
Thank you for your valuable help.
The issue is fixed in npm i spfx-fast-serve-helpers@1.19.5 -DE