Error: Dart Sass version 1.23.0-module.beta.1 is incompatible with ^1.3.0

Question

It worked few weeks ago on different computer! :)

Trying to start new theme with Bootstrap-Sass on Drupal using nodejs, npm and laravel-mix and webpack. Never used it before, I just follow yt tutorial. Nodejs and npm have been installed and with that laravel-mix have been added.

Inside the theme folder following files have been created:

webpack.mix.js - created with same content as last time to convert sass to css.

package.json - created automatically and 'dev' command added manually as per laravel-mix guidance on git-hub to make quick, nice conversion from sass to css.

After running:

npm run dev

all below errors appear.

Bit of a suprise as error is about version 1.3 that do not even exist!

Not sure where to go from here.

> [email protected] dev /var/www/pbd/web/themes/custom/pbdtheme
> npm run development


> [email protected] development /var/www/pbd/web/themes/custom/pbdtheme
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

98% after emitting SizeLimitsPlugin

 ERROR  Failed to compile with 2 errors                              12:22:55 AM

 error  in ./scss/style.scss

Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Dart Sass version 1.23.0-module.beta.1 is incompatible with ^1.3.0.
    at getRenderFuncFromSassImpl (/var/www/pbd/web/themes/custom/pbdtheme/node_modules/sass-loader/dist/index.js:159:13)
    at Object.loader (/var/www/pbd/web/themes/custom/pbdtheme/node_modules/sass-loader/dist/index.js:79:18)
    at runLoaders (/var/www/pbd/web/themes/custom/pbdtheme/node_modules/webpack/lib/NormalModule.js:313:20)
    at /var/www/pbd/web/themes/custom/pbdtheme/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /var/www/pbd/web/themes/custom/pbdtheme/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at runSyncOrAsync (/var/www/pbd/web/themes/custom/pbdtheme/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
    at iterateNormalLoaders (/var/www/pbd/web/themes/custom/pbdtheme/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at /var/www/pbd/web/themes/custom/pbdtheme/node_modules/loader-runner/lib/LoaderRunner.js:205:4
    at process.nextTick (/var/www/pbd/web/themes/custom/pbdtheme/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:73:15)
    at process._tickCallback (internal/process/next_tick.js:61:11)

 error  in ./scss/style.scss

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Dart Sass version 1.23.0-module.beta.1 is incompatible with ^1.3.0.
    at getRenderFuncFromSassImpl (/var/www/pbd/web/themes/custom/pbdtheme/node_modules/sass-loader/dist/index.js:159:13)
    at Object.loader (/var/www/pbd/web/themes/custom/pbdtheme/node_modules/sass-loader/dist/index.js:79:18)

 @ ./scss/style.scss 2:14-189



npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the [email protected] development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/ski/.npm/_logs/2019-09-04T23_22_55_885Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] dev: `npm run development`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/ski/.npm/_logs/2019-09-04T23_22_55_959Z-debug.log

After above command style.css file should be filled with code but no content is there.

Answer 1

Ran into the same issue. In you package.json file, update the version of the "sass" devDependencies to "^1.22.0"

"sass": "^1.22.0"

Dump your node_modules directory and npm install again. All should work now.

Additional: Likely an issue that will be resolved soon. Seems the version that is automatically installed is in BETA.