skip to Main Content

I’m getting the error Node Sass version 6.0.1 is incompatible with ^4.0.0. when running yarn webpack (see full error below).

yarn webpack

yarn run v1.22.5
$ /var/www/app/node_modules/.bin/webpack
 ERROR  Failed to compile with 2 errors                                                                                                                                             11:00:43 AM

 error  in ./assets/app.scss                                                                                                                                                        11:00:43 AM

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.
    at getSassImplementation (/var/www/app/node_modules/sass-loader/dist/utils.js:77:13)
    at Object.loader (/var/www/app/node_modules/sass-loader/dist/index.js:34:59)

 error  in ./assets/app.scss                                                                                                                                                        11:00:43 AM

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):
Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.
    at getSassImplementation (/var/www/app/node_modules/sass-loader/dist/utils.js:77:13)
    at Object.loader (/var/www/app/node_modules/sass-loader/dist/index.js:34:59)
    at processResult (/var/www/app/node_modules/webpack/lib/NormalModule.js:721:19)
    at /var/www/app/node_modules/webpack/lib/NormalModule.js:827:5
    at /var/www/app/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /var/www/app/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at runSyncOrAsync (/var/www/app/node_modules/loader-runner/lib/LoaderRunner.js:156:3)
    at iterateNormalLoaders (/var/www/app/node_modules/loader-runner/lib/LoaderRunner.js:250:2)
    at Array.<anonymous> (/var/www/app/node_modules/loader-runner/lib/LoaderRunner.js:223:4)
    at runCallbacks (/var/www/app/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:27:15)
    at /var/www/app/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:200:4
    at /var/www/app/node_modules/graceful-fs/graceful-fs.js:123:16

Entrypoint js/app [big] 2.74 MiB = runtime.js 14.8 KiB vendors-node_modules_symfony_stimulus-bridge_dist_index_js-node_modules_bootstrap_dist_js_boo-d06387.js 2.03 MiB js/app.css 40 KiB js/app.js 674 KiB
Entrypoint _tmp_copy 14.8 KiB (85.7 KiB) = runtime.js 15 auxiliary assets
webpack compiled with 2 errors
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

package.json

{
    "devDependencies": {
        "@fortawesome/fontawesome-free": "^5.12.0",
        "@symfony/stimulus-bridge": "^2.0.0",
        "@symfony/webpack-encore": "^1.0.0",
        "bootstrap": "^4.4.1",
        "core-js": "^3.6.5",
        "file-loader": "^6.0.0",
        "node-sass": "^6.0.1",
        "popper.js": "^1.16.1",
        "regenerator-runtime": "^0.13.2",
        "sass-loader": "^9.0.1",
        "stimulus": "^2.0.0",
        "webpack-notifier": "^1.6.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress"
    },
    "dependencies": {
        "jquery": "^3.4.1"
    }
}

node -v

v16.4.1

yarn -v

1.22.5

yarn webpack -v

webpack 5.54.0
webpack-cli 4.8.0
webpack-dev-server 4.2.1

composer.json

{
    "name": "symfony/website-skeleton",
    "type": "project",
    "license": "MIT",
    "description": "A skeleton to start a new Symfony website",
    "minimum-stability": "stable",
    "prefer-stable": true,
    "require": {
        "php": "^8.0.3",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "composer/package-versions-deprecated": "*",
        "doctrine/doctrine-bundle": "^2",
        "doctrine/doctrine-migrations-bundle": "^3",
        "doctrine/orm": "^2",
        "knplabs/knp-snappy-bundle": "^1.7",
        "league/csv": "^9.7",
        "omines/datatables-bundle": "^0.5.1",
        "select2/select2": "^4.0",
        "sensio/framework-extra-bundle": "^6.1",
        "sideclick/bootstrap-modal-bundle": "^1.2",
        "stof/doctrine-extensions-bundle": "^1.3",
        "symfony/asset": "*",
        "symfony/console": "*",
        "symfony/dotenv": "*",
        "symfony/expression-language": "*",
        "symfony/flex": "^1.3.1",
        "symfony/form": "*",
        "symfony/framework-bundle": "*",
        "symfony/http-client": "*",
        "symfony/intl": "*",
        "symfony/mailer": "5.3.*",
        "symfony/messenger": "5.3.*",
        "symfony/monolog-bundle": "^3.1",
        "symfony/process": "*",
        "symfony/security-bundle": "*",
        "symfony/serializer-pack": "*",
        "symfony/translation": "*",
        "symfony/twig-pack": "*",
        "symfony/validator": "*",
        "symfony/web-link": "*",
        "symfony/webpack-encore-bundle": "^1.12",
        "symfony/yaml": "*",
        "symfonycasts/reset-password-bundle": "^1.1",
        "twig/string-extra": "^3.3"
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.3",
        "friendsofphp/php-cs-fixer": "^2.16",
        "psalm/plugin-symfony": "^2.2",
        "symfony/debug-pack": "*",
        "symfony/maker-bundle": "^1.0",
        "symfony/profiler-pack": "*",
        "symfony/test-pack": "*",
        "vimeo/psalm": "^4.6"
    },
    "config": {
        "platform": {
            "php": "8.0.3"
        },
        "preferred-install": {
            "*": "dist"
        },
        "sort-packages": true
    },
    "autoload": {
        "psr-4": {
            "App\": "src/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "App\Tests\": "tests/"
        }
    },
    "replace": {
        "paragonie/random_compat": "2.*",
        "symfony/polyfill-ctype": "*",
        "symfony/polyfill-iconv": "*",
        "symfony/polyfill-php71": "*",
        "symfony/polyfill-php70": "*",
        "symfony/polyfill-php56": "*"
    },
    "scripts": {
        "auto-scripts": {
            "cache:clear": "symfony-cmd",
            "assets:install %PUBLIC_DIR%": "symfony-cmd"
        },
        "post-install-cmd": [
            "@auto-scripts"
        ],
        "post-update-cmd": [
            "@auto-scripts"
        ]
    },
    "conflict": {
        "symfony/symfony": "*"
    },
    "extra": {
        "symfony": {
            "require": "5.3.*",
            "allow-contrib": false
        }
    }
}

2

Answers


  1. Chosen as BEST ANSWER

    Error resolved after updating sass-loader from 9.0.1 to 12.1.0.


  2. Solution: use sass instead

    node-sass has now been deprecated. You can simply fix this by installing sass.

    You can uninstall the old and install the new one as follows.

    npm uninstall node-sass
    
    npm install sass
    

    It works all the same, with no other changed needed.

    But if you want to use node-sass anyways You can you can install the right version based on your node.js version as follows

    npm uninstall node-sass
    npm install [email protected]
    

    You can choose your version number based on the following table, based on the node version you have installed, which you can check by the command node --version

    node-sass compatibility table

    I hope it helps you

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search