search

s-KaiNet / spfx-fast-serve

Improve your SharePoint Framework development flow by speeding up the "serve" command :rocket:
MIT License
132 stars 11 forks source link

1.19 Issue with .SCSS file #139

Closed kbeeveer46 closed 2 weeks ago

kbeeveer46 commented 2 weeks ago

After upgrading to all the latest SPFx packages and fast serve 1.19 I am getting an error in a .scss file. I first noticed it on my existing project so I created a new blank project and added the scss file to it. As soon as I import the scss file into the default web part I get the error. I also tested the file with gulp serve and it works fine. So it's something with fast serve.

I'm going to start removing items one by one in the scss file to see if I can pinpoint the exact line. I figured I would post here in case anyone already knows what causes this.

EDIT: I found the culprit. It was caused by content: '\2020'; in the following code. It's used to add a dagger symbol. I'm using it correctly as far as I can tell.

.tableColumnDagger {
    &::after {
        content: '\2020';
        vertical-align: super;
    }
}

.tableColumnDaggerBefore {
    &::before {
        content: '\2020';
        vertical-align: super;
    }
}

Log:

PS C:\RespositoriesGit\CP\clientportalsharepoint - fastserve\119> npm run serve

> 119@0.0.1 serve
> fast-serve

[20:05:16] Node flags detected: --max-old-space-size=8192
[20:05:16] Respawned to PID: 11660
Build target: DEBUG
[20:05:18] Using gulpfile C:\RespositoriesGit\CP\clientportalsharepoint - fastserve\119\gulpfile.js
[20:05:18] Starting 'bundle'...
[20:05:18] Starting gulp
[20:05:18] Starting subtask 'pre-copy'...
[20:05:18] Finished subtask 'pre-copy' after 40 ms
[20:05:18] Starting subtask 'copy-static-assets'...
[20:05:18] Starting subtask 'sass'...
[20:05:19] Finished subtask 'sass' after 511 ms
[20:05:19] Starting subtask 'lint'...
[20:05:19] [lint] eslint version: 8.7.0
[20:05:19] Starting subtask 'tsc'...
[20:05:19] [tsc] typescript version: 4.7.4
[20:05:19] Finished subtask 'copy-static-assets' after 568 ms
[20:05:21] Finished subtask 'tsc' after 2.08 s
[20:05:21] Starting subtask 'save-webpack-config'...
[20:05:21] Finished subtask 'save-webpack-config' after 446 μs
[20:05:22] Finished subtask 'lint' after 3.47 s
[20:05:22] Starting subtask 'post-copy'...
[20:05:22] Finished subtask 'post-copy' after 207 μs
[20:05:22] Starting subtask 'configure-webpack'...
[20:05:23] Finished subtask 'configure-webpack' after 354 ms
[20:05:23] Starting subtask 'webpack'...
[20:05:24] Finished subtask 'webpack' after 1.56 s
[20:05:24] Finished 'bundle' after 5.95 s
[20:05:25] ==================[ Finished ]==================
[20:05:25] Project 119 version:0.0.1
[20:05:25] Build tools version:3.18.1
[20:05:25] Node version:v18.20.2
[20:05:25] Total duration:8.83 s
[20:05:27] [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:\RespositoriesGit\CP\clientportalsharepoint - fastserve\119\temp' directory
<i> [webpack-dev-server] 404s will fallback to '/index.html'
Entrypoint hello-world-web-part 271 KiB (24.8 KiB) = hello-world-web-part.js 2 auxiliary assets

ERROR in ./src/webparts/helloWorld/components/common.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/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./node_modules/spfx-fast-serve-helpers/node_modules/clean-css-loader/lib/index.js??ruleSet[1].rules[4].use[4]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[5]!./src/webparts/helloWorld/components/common.module.scss)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: No element indexed by 1
    at ArraySet.ArraySet_at [as at] (C:\RespositoriesGit\CP\clientportalsharepoint - fastserve\119\node_modules\source-map-js\lib\array-set.js:109:9)
    at BasicSourceMapConsumer.SourceMapConsumer_originalPositionFor [as originalPositionFor] (C:\RespositoriesGit\CP\clientportalsharepoint - fastserve\119\node_modules\source-map-js\lib\source-map-consumer.js:707:34)
    at SourceMapGenerator.<anonymous> (C:\RespositoriesGit\CP\clientportalsharepoint - fastserve\119\node_modules\source-map-js\lib\source-map-generator.js:210:43)
    at Array.forEach (<anonymous>)
    at MappingList.MappingList_forEach [as unsortedForEach] (C:\RespositoriesGit\CP\clientportalsharepoint - fastserve\119\node_modules\source-map-js\lib\mapping-list.js:44:17)
    at SourceMapGenerator.SourceMapGenerator_applySourceMap [as applySourceMap] (C:\RespositoriesGit\CP\clientportalsharepoint - fastserve\119\node_modules\source-map-js\lib\source-map-generator.js:207:20)
    at MapGenerator.applyPrevMaps (C:\RespositoriesGit\CP\clientportalsharepoint - fastserve\119\node_modules\postcss\lib\map-generator.js:61:16)
    at MapGenerator.generateMap (C:\RespositoriesGit\CP\clientportalsharepoint - fastserve\119\node_modules\postcss\lib\map-generator.js:119:55)
    at MapGenerator.generate (C:\RespositoriesGit\CP\clientportalsharepoint - fastserve\119\node_modules\postcss\lib\map-generator.js:85:19)
    at LazyResult.stringify (C:\RespositoriesGit\CP\clientportalsharepoint - fastserve\119\node_modules\postcss\lib\lazy-result.js:350:20)

webpack compiled in 1681 ms
Type-checking in progress...
No errors found.

common.module.scss:

/**************************** Colors ***************************/

$primaryColor: #11284A;

:export {
    primaryColor: $primaryColor;
}

/**************************** Layout ****************************/

@media only screen and (max-width: 1440px) {

    .clientPortalWrapper {
        background-color: $primaryColor;
        padding: 5px 5px 30px 5px;
    }

}

@media only screen and (min-width: 1441px) {

    .clientPortalWrapper {
        background-color: $primaryColor;
        padding: 5px 10px 30px 10px;
    }

}

.clientPortalContent {

    padding: 15px;
    background-color: #fff;
    // background-color: #f8f8f8;
    min-height: 100vh !important;
    border-radius: 10px;

}

@media only screen and (max-width: 1440px) {

    .clientPortalContent {
        padding: 10px !important;
        // background-color: #fff;
        // min-height: calc(100vh) !important;
        // border-radius: 10px;
    }

}

.fullWidth {
    width: 100% !important;
}

.stickyToTop {
    position: sticky;
    top: 0px;
    background-color: #fff;
    z-index: 1100;
}

// .stickyToTopPopup {
//     position: sticky;
//     top: 0px;
//     background-color: #fff;
//     z-index: 1100;
// }

@media screen and (max-width: 54.125em) {

    .pageHeaderWrapper {
        display: contents;
    }

}

/**************************** Loading ****************************/

.loadingSpinner {
    display: flex;
    justify-content: center;
}

.overlaySpinner {
    position: fixed;
    top: 40%;
    left: 50%;
    width: 75px;
    height: 75px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 1px 1px 3px #76777a;
    transform: translate(-50%, -50%);
    z-index: 2000000 !important;
}

.overlaySpinnerFileUpload {
    position: fixed;
    top: 40%;
    left: 50%;
    width: 300px;
    height: 125px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 1px 1px 3px #76777a;
    transform: translate(-50%, -50%);
    z-index: 2000000 !important;
}

.overlaySpinnerLoading {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.actionButtonsStack {
    padding: 20px 0;
}

@media screen and (max-width: 54.125em) {

    .actionButtonsStack {
        padding: 10px 0 0 0 !important;
    }
}

/**************************** Excel export ****************************/

@media screen and (max-width: 54.125em) {

    .excelExportButton {
        display: none;
    }
}

/**************************** Sidebar ****************************/

.sidebar {
    min-height: 92%;
}

@media screen and (max-width: 54.125em) {

    .sidebar {
        min-height: 100% !important;
    }
}

.sidebarLeft {
    width: 400px !important;
    padding-bottom: 25px;
}

/**************************** Tables ****************************/

.fullScreenTable {

    font-size: inherit;

    button {
        font-size: 12.5px;
    }
}

@media only screen and (max-width: 1512px) {

    .fullScreenTable {

        font-size: 90% !important;

        button {
            font-size: 11.5px !important;
        }
    }
}

.tableGroupHeader {
    font-family: "proxima_nova_bold" !important;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: normal;
}

.stickyToBottomPaginator {
    position: sticky;
    bottom: 0px;
}

.stickyToBottomPaginatorWithDisclaimer {
    position: sticky;
    bottom: 32px;
}

.tableWithHeader {

    table {
        border-collapse: separate !important;
        border-spacing: 0px;
    }

    thead {
        position: sticky;
        z-index: 1100;
        top: 43px !important;
        background-color: #FFF;
    }

    tfoot {
        position: sticky;
        bottom: 50px !important;
    }
}

.tableWithHeaderGroupBy {
    display: flex !important;
}

@media screen and (max-width: 1359px) {

    .tableWithHeaderGroupBy {
        display: none !important;
    }

}

.tableHeaderStackWrapper {

    :global(.p-multiselect-panel) {

        :global(.p-multiselect-items-wrapper) {
            max-height: 350px !important;
        }

    }

}

.tableHeaderStack {

    :global(.ms-Stack-inner) {

        align-items: center;

        :global(.ms-StackItem) {

            padding-bottom: 10px;
        }
    }
}

.stickyToTopTableHeaders {
    position: sticky;
    z-index: 1100;
    top: 78px !important;

    word-break: break-word;
    word-wrap: break-word;
    white-space: pre-wrap;
}

@media screen and (max-width: 866px) {

    .tableHeaderDownloadButtonStackItem {
        display: none;
    }

}

.tableWithDisclaimer {

    tfoot {
        position: sticky !important;
        bottom: 75px !important;
        background-color: #FFF !important;
    }

}

.tableColumnDagger {

    &::after {
        content: '\2020';
        vertical-align: super;
    }

}

.tableColumnDaggerBefore {

    &::before {
        content: '\2020';
        vertical-align: super;
    }

}

/* Contact */

.contactInfo {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    // background-color: #f8f8f8;
    border-radius: 10px;
    margin-bottom: 5px;
}

@media only screen and (max-width: 1440px) {

    .contactInfo {
        padding: 5px 5px 0 5px !important
    }
}

.contactInfoLoggedInUser {
    display: block;
}

.contactInfoDMAUser {
    display: flex;
    flex-wrap: wrap;
}

@media screen and (max-width: 1359px) {

    .contactInfoLoggedInUser {
        display: none !important;
    }
}

.contactInfoPersona {
    display: inline-block;
    color: $primaryColor;
    animation-duration: 0.5s;
    animation-name: animateFade;
}

@media screen and (max-width: 54.125em) {

    .contactInfoPersona {
        padding: 5px 0;
    }
}

.contactInfoPrimaryText {
    font-weight: 600;
    font-size: calc(9px + 0.25vw) !important;
}

@media screen and (max-width: 54.125em) {

    .contactInfoPrimaryText {
        font-size: 12px !important;
    }
}

.contactInfoSecondaryText {
    font-size: 12px;
    line-height: 18px;
    font-size: calc(8px + 0.25vw) !important;
}

@media screen and (max-width: 54.125em) {

    .contactInfoSecondaryText {
        font-size: 12px !important;
    }
}

.contactInfoCoin {
    box-shadow: 1px 1px 3px #76777a;
    border-radius: 50%;
    height: calc(26px + 0.6vw);
    min-width: calc(26px + 0.6vw);
}

@media screen and (max-width: 54.125em) {

    .contactInfoCoin {
        height: 40px !important;
        min-width: 40px !important;
    }
}

.contactInfoCoinInitials {
    background-color: $primaryColor;
}

.contactInfoInitials {
    color: #FFF;
    font-size: calc(5px + 0.4vw);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    height: calc(26px + 0.5vw);
    min-width: calc(26px + 0.6vw);
}

@media screen and (max-width: 54.125em) {

    .contactInfoInitials {
        font-size: unset !important;
        height: 40px !important;
        min-width: 40px !important
    }
}

/* Select filters */

.searchFiltersPanelWrapper {
    height: 100% !important;
    padding-bottom: 5px;
}

.applyResetWrapper {
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 1;
}

.dateRangeItem {
    width: 100% !important;
}

.selectFiltersButton {
    z-index: 1;
    font-family: "proxima_nova_bold";
    font-weight: normal;
}

@media screen and (max-width: 54.125em) {

    .selectFiltersButton {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-left: 0px !important;
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 54.125em) {

    .selectFiltersButtonWrapper {
        flex-grow: 1;
    }

}

/* Text */

.wrapText {
    word-break: break-word;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.wrapTextTableFooter {
    display: flex;
}

.bold {
    font-weight: 600;
}

.required {
    color: #BB0A21;
}

.alignCenter {
    display: flex;
    justify-content: center;
}

/* Tooltip */

.toolTipHostContent {
    border: 1px solid #b3b3b3;
}

.inputHelpIcon {
    font-size: 16px;
    vertical-align: middle;
    padding-left: 5px;
    cursor: help;
}

/************************************************** Charts **************************************************/

.chartFullScreen {
    /* Required for the chart be displayed */
    height: 600px;
}

.chartTooltipWrapper {
    z-index: 1 !important;
}

@media screen and (max-width: 1359px) {

    .chartTooltipWrapper {
        display: none !important;
    }
}

.chartTooltipTitle {
    display: flex;
    justify-content: center;
    margin: 0px;
    font-size: 24px;
    font-family: "proxima_nova_black" !important;
    text-transform: uppercase;
    align-items: center;
}

.chartTooltipName {
    font-size: 13px;
    display: inline;
}

.chartTooltipAmount {
    font-size: 13px;
}

.chartTooltipTotal {
    display: flex;
    justify-content: center;
    font-size: 16px;
    font-family: "proxima_nova_bold" !important;
    text-transform: uppercase;
}

.chartTooltipClickForDetail {
    font-size: 11.5px;
    text-align: center;
}

.chartLegendCircleWrapper {
    display: flex;
    align-items: center;
}

.chartLegendCircle {
    width: 20px;
    min-width: 20px;
    height: 20px;
    min-height: 20px;
    border-radius: 50%;
    margin: 2px 5px 2px 2px;
    display: inline-block;
    vertical-align: bottom;
    opacity: 0.75;
}

.chartDisclaimer {
    font-size: 12px;
    display: flex;
    justify-content: center;
}

@media print {

    .chartBackIcon {
        display: none;
    }
}

@media print {

    .chartFullScreenIcon {
        display: none;
    }
}

@media screen and (max-width: 1359px) {

    .chartFullScreenIcon {
        display: none !important;
    }
}

@media screen and (max-width: 1359px) {

    .chartPrintIcon {
        display: none !important;
    }
}

@media print {

    .chartPrintIcon {
        display: none;
    }
}

/************************************************** Map **************************************************/

.mapMarker {
    cursor: pointer;
    fill: #BB0A21;
}

.mapToolTipBorder {
    box-shadow: 1px 1px 3px #76777a;
    z-index: 1;
    min-width: 250px;
    min-height: 250px;
    border-radius: 3px;
}

.mapPopupStateName {
    text-align: center;
    width: 100%;
    margin: 0px;
    font-size: 24px;
    font-family: "proxima_nova_black" !important;
    text-transform: uppercase;
    color: $primaryColor;
}

.mapHideLogo {
    width: 100%;
    height: 30px;
    bottom: 0px;
    right: 0px;
    background-color: #fff;
    // background-color: #f8f8f8;
    position: absolute;
    z-index: 2;
}

.mapTypeDropdown {

    :global(.p-dropdown) {
        width: 180px !important;
        border-radius: 5px !important;
    }

    :global(.p-dropdown-label) {
        text-transform: uppercase;
        font-family: "proxima_nova_bold";
        font-weight: normal;
        display: flex !important;
        justify-content: center !important;
        padding-left: 25px !important;
        align-items: center;
        font-size: 16px;
    }

    :global(.p-dropdown-item) {
        text-transform: uppercase;
        font-family: "proxima_nova_bold";
        font-weight: normal;
        display: flex !important;
        justify-content: center !important;
        padding-right: 20px !important;
        font-size: 16px;
    }
}

/************************************************** Reports **************************************************/

.reportsFieldsTable {

    tbody {

        tr {
            height: 45px;
        }

    }
}

.reportsIsSharedDescription {
    font-size: 12px;
    padding-top: 5px;
}

.createReportFiltersWrapper {
    position: sticky;
    bottom: 0px;
    background-color: #FFF;
    padding-bottom: 5px;
}

.reportOption {

    display: flex;
    align-items: center;
    gap: 10px;

    i {
        font-size: 18px;
        display: flex;
    }
}

.reportOptionLabel {
    width: 100%;
    word-break: break-word;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.reportOptionDescriptionIcon {
    cursor: help;
}

.reportOptionDeleteIcon {

    &:hover {
        color: #bb0a21;
    }
}

/************************************************** Alerts **************************************************/

.manageAlertsWrapper {
    flex-wrap: nowrap;
    gap: 25px;
}

@media screen and (max-width: 54.125em) {

    .manageAlertsWrapper {
        flex-wrap: wrap;
        gap: unset;
    }
}

.manageAlertsYourAlerts {

    width: 70%;

    :global(.p-panel-content) {
        min-height: 576px;
    }
}

@media screen and (max-width: 54.125em) {

    .manageAlertsYourAlerts {

        width: 100%;

        :global(.p-panel-content) {
            min-height: unset !important;
        }
    }
}

.manageAlertsCreateAlerts {
    width: 30%;
}

@media screen and (max-width: 54.125em) {

    .manageAlertsCreateAlerts {
        width: 100%;
    }
}

/************************************************** Teaching Bubble **************************************************/

// .teachingBubbleButton {

//     span {
//         font-family: "proxima_nova_bold" !important;
//         font-weight: normal !important;
//         text-transform: uppercase !important;
//     }

// }

// .teachingBubbleConfirmButton {
//     border: none !important;
//     outline: none !important;
//     outline-offset: 0px !important;
//     background-color: #FFF !important;
// }

// .consultingComplianceTeachingBubble {
//     width: 265px;
//     visibility: hidden;
//     background-color: #FFF;
//     margin-left: -275px;
//     height: 40px;
//     float: right;
// }

/* Cursor */

.pointer {
    cursor: pointer !important;
}

/* Download selected button */

@media screen and (max-width: 54.125em) {

    .downloadSelectedButton {
        display: none;
    }
}

/* Iframe */

.iframeDescription {
    text-align: center;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 5px;
}

.iframeContents {
    width: 100%;
    margin-top: 5px;
    border: none;
}

/* Inputs */

.numericRangeInputEditor {
    height: 35px !important;
    width: 100% !important;
    flex: 0 1 auto !important;
}

.checkboxUnchecked {
    font-size: 16px;
}

.checkboxChecked {
    font-size: 12px;
    padding: 3px;
    border-radius: 3px;
    color: #FFF;
    background-color: $primaryColor;
}

.inputIcon {
    font-size: 16px;
}

/* Breadcrumb */

.breadcrumbWrapper {
    border: 1px solid #f2f2f2;
    border-radius: 6px;
    align-items: center;
    margin: 10px 0px;
}

/* Tour Guide */

@media screen and (max-width: 54.125em) {

    .tourGuideIcon {
        display: none;
    }
}

/* Error Boundary */

.errorBoundary {
    text-align: center;
    width: 100%;
}

/* Notifications */

@media screen and (max-width: 54.125em) {

    .toastMessage {
        display: none !important;
    }
}

.toastMessage {
    display: block;
    opacity: 1 !important;
    z-index: 20000000000 !important;
    word-break: break-word;
    word-wrap: break-word;
    white-space: pre-wrap
}

/* Scroll To Top */

.scrollToTop {
    position: fixed;
    z-index: 10;
    bottom: 0;
    right: 0;
    margin: 2em;
    background-color: $primaryColor;
    color: white;
    font-weight: bold;
    border-radius: 50%;
    border: 1px solid #fff;
    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
        0px 1px 5px 0px rgba(0, 0, 0, 0.12);

    &:hover {
        background-color: $primaryColor !important;
        color: white;
    }

}

/* Demo mode */

@media screen and (max-width: 54.125em) {

    .demoModeIcon {
        display: none;
    }
}

.demoModeWrapper {
    padding: 5px;
    border-radius: 3px;
    color: #fff;
    font-family: "proxima_nova_bold" !important;
    font-weight: normal;
    font-size: 10px;
    text-transform: uppercase;
    background-color: $primaryColor;
}

/* Dialogs */

.clientPortalDialogMessage {
    white-space: pre-line;
    line-height: 24px;
}

/* Animations */

@keyframes animateFade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.fadeInAnimation {
    animation-duration: .5s;
    animation-name: animateFade;
}
s-KaiNet commented 2 weeks ago

The issue is fixed in 1.19.1. To test it, you could explicitly install npm i spfx-fast-serve-helpers@1.19.1 -DE.

Please check and tell if it works for you.

kbeeveer46 commented 2 weeks ago

The issue has been fixed. Thanks!