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

Question

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.

Check the version of saas-loader in package-lock.json of yours and his. — Ritesh Waghela, Jan 17 '23 at 16:27

score 1 · Answer 1 · answered Jan 13 '23 at 14:32

1

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

answered Jan 13 '23 at 14:32

Kostas Nitaf

428
1
2
12

score 1 · Answer 2 · answered Jan 16 '23 at 16:32

1

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

answered Jan 16 '23 at 16:32

exside

3,736
1
12
19

You are right, this does feel like it. Wouldnt this be baked into the package/package-lock so we are on the same version tho? – Chris Kooken Jan 17 '23 at 19:04
Yes for `package-lock.json` as it'll make you both install the same packages versions. `package.json` doesn't help as you can set "latest version" by using `^` – luiscla27 Jan 17 '23 at 21:16
so why would it behave differently for him? – Chris Kooken Jan 18 '23 at 19:44
If after making the build both `package-lock.json` are exactly the same, then I have no idea LOL (maybe he used `npm update`). You haven't confirmed that both yours and your colleague files are **exactly** the same after running the app... that's the reason I keep insisting. – luiscla27 Jan 18 '23 at 22:21

score 1 · Answer 3 · answered Jan 19 '23 at 09:30

It seems to be a problem with the Sass-loader library, which is used to convert Sass code to CSS code. According to the error message, compound selectors can no longer be extended. Have you tried doing what error message suggests?

Consider using @extend .k-button, ::before instead of @extend .k-button::before in theme.scss

You should also check that you are using the same version of Sass-loader.

You can also try removing the node_modules, clearing the cache with npm cache clean and re-installing the dependencies.

score 1 · Answer 4 · answered Jan 20 '23 at 11:03

If you see the error itself, it explains the error, which is from your errors I am quoting

@extend .k-button::before;
Compound selectors may no longer be extended.
    Consider `@extend .k-button, ::before` instead.

The issue is because of the breaking change with sass @extend. Check Docs Example

Breaking Change: Extending Compound Selectors

LibSass currently allows compound selectors like .message.info to be extended, but the way it was extended doesn't match the way @extend is meant to work.

// Instead of just `.message.info`.
%message-info, .message.info {
  border: 1px solid black;
  font-size: 1.5rem;
}

.heads-up {
  // Instead of `.message.info`.
  @extend %message-info;
}

Kindly check the original docs for example

luiscla27 · Answer 5 · 2023-01-18T17:25:44.507

I can think of the following possibilities:

1. Wrong package-lock control version

It could be that your package-lock.json file is not on your version control. Before of npm install: make sure that both, yours and the other machine are exactly the same.

If this turns out to be the problem, it means that there's an incompatibility issue between your TypeScript version and some of your @types packages. It works in your machine because your package-lock file "locked it" to a compatible one there. Also, npm update will break things for the same reasons.

2. Break types issue

It might be a CRLF (Windows), LF (Unix and Mac) vs CR (Old Mac) differences issue.

If the code was written using a MAC, then it's probably using LF only. git has an autocrlf option which you have to configure correctly to handle things transparently. Try to download the project again and run --renormalize:

git add --renormalize

From documentation:

Apply the "clean" process freshly to all tracked files to forcibly add them again to the index. This is useful after changing core.autocrlf configuration or the text attribute in order to correct files added with wrong CRLF/LF line endings. This option implies -u.

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

5 Answers5

1. Wrong package-lock control version

2. Break types issue