Update package.json for sass version

[AmanSonii]

Replace node-sass with sass for Node.js 18+ compatibility

• node-sass has been deprecated and is no longer supported in Node.js versions 18 and above.
• Replaced node-sass with sass to ensure compatibility with Node.js 18+.
• This update aligns with the latest release (v9.52) which only supports Node.js 18+.

Fixes build issues with newer Node.js versions.

[AmanSonii]

Fix build issue by replacing node-sass with sass for Node.js 18+

• Issue: Attempting to install dependencies in the repository on Node.js 18+ resulted in errors related to node-sass, as node-sass is deprecated and no longer supported in newer Node.js versions.
• Error encountered: gyp ERR! UNCAUGHT EXCEPTION due to node-sass compatibility issues with Node.js 18+.
• Resolution: Updated the package.json to replace node-sass with sass as recommended in the node-sass deprecation notice.
• After updating the package.json, running yarn will now successfully install the dependencies without issues.

The steps to reproduce and resolve:

Clone the repository: git clone https://github.com/microsoft/Msdyn365.Commerce.Online.git
Run yarn to install dependencies. This will trigger the error related to node-sass.
Replace node-sass with sass in package.json (as done in the updated commit).
Run yarn again, and the issue should be resolved.

[AmanSonii]

Hi guys is there any update on this PR?

[jaredtbates]

Hey @AmazonSonii, how did you resolve the following errors?

order-details.scss

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Expected "n".
    ╷
739 │             &:nth-last-child() {
    │                              ^
    ╵
  node_modules/@msdyn365-commerce-theme/adventureworks-theme-kit/dist/lib/modules/adventureworks/styles/modules/order-details.scss 739:30  root stylesheet

content-block-tile.scss 1

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Top-level selectors may not contain the parent selector "&".
    ╷
169 │     &.col-sm:last-child .ms-content-block[data-m-layout="tile"]:last-child {
    │     ^
    ╵
  node_modules/@msdyn365-commerce-theme/adventureworks-theme-kit/dist/lib/modules/adventureworks/styles/modules/content-block-tile.scss 169:5  root stylesheet

content-block-tile.scss 2

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Top-level selectors may not contain the parent selector "&".
    ╷
141 │     &.col-sm:last-child .ms-content-block[data-m-layout="tile"]:last-child {
    │     ^
    ╵
  node_modules/@msdyn365-commerce-modules/fabrikam-design-kit/dist/lib/modules/fabrikam/styles/modules/content-block-tile.scss 141:5  root stylesheet

[AmanSonii]

@jared

Hey @AmazonSonii, how did you resolve the following errors?

order-details.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Expected "n".
╷
739 │ &:nth-last-child() {
│ ^
╵
node_modules/@msdyn365-commerce-theme/adventureworks-theme-kit/dist/lib/modules/adventureworks/styles/modules/order-details.scss 739:30 root stylesheet
content-block-tile.scss 1
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Top-level selectors may not contain the parent selector "&".
╷
169 │ &.col-sm:last-child .ms-content-block[data-m-layout="tile"]:last-child {
│ ^
╵
node_modules/@msdyn365-commerce-theme/adventureworks-theme-kit/dist/lib/modules/adventureworks/styles/modules/content-block-tile.scss 169:5 root stylesheet
content-block-tile.scss 2

Hey @AmazonSonii, how did you resolve the following errors?

order-details.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Expected "n".
╷
739 │ &:nth-last-child() {
│ ^
╵
node_modules/@msdyn365-commerce-theme/adventureworks-theme-kit/dist/lib/modules/adventureworks/styles/modules/order-details.scss 739:30 root stylesheet
content-block-tile.scss 1
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Top-level selectors may not contain the parent selector "&".
╷
169 │ &.col-sm:last-child .ms-content-block[data-m-layout="tile"]:last-child {
│ ^
╵
node_modules/@msdyn365-commerce-theme/adventureworks-theme-kit/dist/lib/modules/adventureworks/styles/modules/content-block-tile.scss 169:5 root stylesheet
content-block-tile.scss 2

Yes in the upcoming version those errors have been resolved

[danielkoch]

@AmanSonii: I think this will not work in that way, because node-sass is a dependency from most of the @MSDYN packages. What you could do is upgrade node-sass to v9 which works together with NodeJs v18.

[AmanSonii]

@AmanSonii: I think this will not work in that way, because node-sass is a dependency from most of the @MSDYN packages. What you could do is upgrade node-sass to v9 which works together with NodeJs v18.

I tried that as well but it didn't work. The best alternative I found was sass only and fortunately it worked for me.

[danielkoch]

@AmanSonii: I think this will not work in that way, because node-sass is a dependency from most of the @MSDYN packages. What you could do is upgrade node-sass to v9 which works together with NodeJs v18.

I tried that as well but it didn't work. The best alternative I found was sass only and fortunately it worked for me.

That is interesting. Are you using a custom theme?
For us only the upgrade approach works.

Unfortunately the whole ecosystem/dependencies are somehow out-of-control here.

I think currently MS is stick to NodeJs v16 (https://nodejs.org/en/blog/announcements/nodejs16-eol) – therefore a change is not that easy.