Angular 8 build environmental issue. "Compound selectors may no longer be extended"-CodePudding

We have an older Angular 8 app that has a some bit rot. We brought in a new developer and we are planning on upgrading everything to ng latest. I have an M1 Mac and everything builds fine on my machine. He has an intel based Mac, but when he tries to build, he gets the error below. Node, Npm, Angular CLI versions have all be downgraded to match mine, but still no luck.

ERROR in ./src/assets/scss/theme.scss
    Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
    ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):
     
                    @extend .k-button::before;
                           ^
          Compound selectors may no longer be extended.
    Consider `@extend .k-button, ::before` instead.
    See ExtendCompound for details.
     
        ╷
    105 │                 @extend .k-button::before;
        │                         ^^^^^^^^^^^^^^^^^
        ╵
      node_modules/@progress/kendo-theme-bootstrap/modules/@progress/kendo-theme-default/scss/toolbar/_layout.scss 105:25  root stylesheet
          in /Users/redacted/Development/Personal/repos/Projects/Proverbs/redacted/src/redacted.Web/ClientApp/node_modules/@progress/kendo-theme-bootstrap/modules/@progress/kendo-theme-default/scss/toolbar/_layout.scss (line 105, column 25)
        at /Users/redacted/Development/Personal/repos/Projects/Proverbs/redacted/src/redacted.Web/ClientApp/node_modules/webpack/lib/NormalModule.js:316:20
        at /Users/redacted/Development/Personal/repos/Projects/Proverbs/redacted/src/redacted.Web/ClientApp/node_modules/loader-runner/lib/LoaderRunner.js:367:11
        at /Users/redacted/Development/Personal/repos/Projects/Proverbs/redacted/src/redacted.Web/ClientApp/node_modules/loader-runner/lib/LoaderRunner.js:233:18
        at context.callback (/Users/redacted/Development/Personal/repos/Projects/Proverbs/redacted/src/redacted.Web/ClientApp/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
        at /Users/redacted/Development/Personal/repos/Projects/Proverbs/redacted/src/redacted.Web/ClientApp/node_modules/sass-loader/lib/loader.js:52:13
        at Function.$2 (/Users/redacted/Development/Personal/repos/Projects/Proverbs/redacted/src/redacted.Web/ClientApp/node_modules/sass/sass.dart.js:24388:48)
        at wO.$2 (/Users/redacted/Development/Personal/repos/Projects/Proverbs/redacted/src/redacted.Web/ClientApp/node_modules/sass/sass.dart.js:15315:15)
        at uT.vr (/Users/redacted/Development/Personal/repos/Projects/Proverbs/redacted/src/redacted.Web/ClientApp/node_modules/sass/sass.dart.js:9046:42)
        at uT.vq (/Users/redacted/Development/Personal/repos/Projects/Proverbs/redacted/src/redacted.Web/ClientApp/node_modules/sass/sass.dart.js:9048:32)
        at iA.uD (/Users/redacted/Development/Personal/repos/Projects/Proverbs/redacted/src/redacted.Web/ClientApp/node_modules/sass/sass.dart.js:8396:46)
        at us.$0 (/Users/redacted/Development/Personal/repos/Projects/Proverbs/redacted/src/redacted.Web/ClientApp/node_modules/sass/sass.dart.js:8538:7)
        at Object.eH (/Users/redacted/Development/Personal/repos/Projects/Proverbs/redacted/src/redacted.Web/ClientApp/node_modules/sass/sass.dart.js:1512:80)
        at ad.ba (/Users/redacted/Development/Personal/repos/Projects/Proverbs/redacted/src/redacted.Web/ClientApp/node_modules/sass/sass.dart.js:8459:3)
        at iO.ba (/Users/redacted/Development/Personal/repos/Projects/Proverbs/redacted/src/redacted.Web/ClientApp/node_modules/sass/sass.dart.js:8389:25)
        at iO.cv (/Users/redacted/Development/Personal/repos/Projects/Proverbs/redacted/src/redacted.Web/ClientApp/node_modules/sass/sass.dart.js:8376:6)
        at py.cv (/Users/redacted/Development/Personal/repos/Projects/Proverbs/redacted/src/redacted.Web/ClientApp/node_modules/sass/sass.dart.js:8166:35)
    ERROR in node_modules/@types/node/assert.d.ts(2,68): error TS1144: '{' or ';' expected.
    node_modules/@types/node/assert.d.ts(53,68): error TS1144: '{' or ';' expected.
    node_modules/@types/node/assert.d.ts(62,94): error TS1144: '{' or ';' expected.
    node_modules/@types/node/assert.d.ts(62,101): error TS1005: ';' expected.
    node_modules/@types/node/assert.d.ts(62,104): error TS1005: ';' expected.
    node_modules/@types/node/assert.d.ts(64,98): error TS1144: '{' or ';' expected.
    node_modules/@types/node/assert.d.ts(64,105): error TS1005: ';' expected.
    node_modules/@types/node/assert.d.ts(64,108): error TS1005: ';' expected.
    node_modules/@types/node/assert.d.ts(72,47): error TS1144: '{' or ';' expected.
    node_modules/@types/node/assert.d.ts(72,53): error TS1005: ';' expected.
    node_modules/@types/node/assert.d.ts(72,56): error TS1005: ';' expected.
    node_modules/@types/node/assert.d.ts(99,61): error TS1005: ';' expected.
    node_modules/pdfjs-dist/types/src/display/annotation_storage.d.ts(66,5): error TS1127: Invalid character.
    node_modules/pdfjs-dist/types/src/display/annotation_storage.d.ts(80,5): error TS1127: Invalid character.
    node_modules/pdfjs-dist/types/src/display/api.d.ts(1410,5): error TS1127: Invalid character.
    node_modules/pdfjs-dist/types/src/display/api.d.ts(1466,5): error TS1127: Invalid character.
    node_modules/pdfjs-dist/types/src/display/editor/annotation_editor_layer.d.ts(190,5): error TS1127: Invalid character.
    node_modules/pdfjs-dist/types/src/display/editor/editor.d.ts(225,5): error TS1127: Invalid character.
    node_modules/pdfjs-dist/types/src/display/editor/tools.d.ts(173,5): error TS1127: Invalid character.
    node_modules/pdfjs-dist/types/src/display/editor/tools.d.ts(245,5): error TS1127: Invalid character.
    node_modules/pdfjs-dist/types/src/display/editor/tools.d.ts(271,5): error TS1127: Invalid character.
    node_modules/pdfjs-dist/types/src/display/metadata.d.ts(10,5): error TS1127: Invalid character.
    node_modules/pdfjs-dist/types/src/display/optional_content_config.d.ts(11,5): error TS1127: Invalid character.
    node_modules/pdfjs-dist/types/web/annotation_editor_layer_builder.d.ts(55,5): error TS1127: Invalid character.
    node_modules/pdfjs-dist/types/web/pdf_find_controller.d.ts(83,5): error TS1127: Invalid character.
    node_modules/pdfjs-dist/types/web/text_accessibility.d.ts(41,5): error TS1127: Invalid character.

CodePudding user response：

You should check if you have to rename style and skipTests to versions 8 deprecated styleext and spec inside your angular.json file.

Check the following link: https://github.com/angular/angular-cli/commit/e92c46a

CodePudding user response：

I don't think your problem is with Angular/Node/NPM but rather with SASS, did you check that you have the same version (either dart or libsass?) as your colleague? Had to dig a little to find it again (had the same issue a while ago) but here it is for reference: https://sass-lang.com/documentation/breaking-changes/extend-compound