Webpack-encore: ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.

[monkeyArms]

I just tried enabling sass support by adding .enableSassLoader() in webpack.config.js, and encore directed me to install node-sass and sass-loader@^7.3.1.

After doing this compilation fails with the following error message:
$ yarn encore dev --watch

Running webpack ...


webpack is watching the files…

 ERROR  Failed to compile with 1 errors                                                                                                                                                                                                                        8:03:46 PM


 error  in ./assets/css/app.scss

ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'localIdentName'. These properties are valid:
   object { url?, import?, modules?, sourceMap?, importLoaders?, localsConvention?, onlyLocals?, esModule? }


 @ ./assets/js/pages/App.js 57:0-28
 @ ./assets/js/app.js

Entrypoint app [big] = runtime.js vendors~app.js app.js

Here's my package.json:

{
    "dependencies": {
        "babel-loader": "^8.1.0",
        "prop-types": "^15.7.2",
        "react": "^16.13.1",
        "react-dom": "^16.13.1",
        "react-redux": "^7.2.0",
        "react-router-dom": "^5.1.2",
        "react-scripts": "3.4.0",
        "redux": "^4.0.5",
        "redux-thunk": "^2.3.0"
    },
    "devDependencies": {
        "@babel/preset-react": "^7.9.4",
        "@symfony/webpack-encore": "^0.28.2",
        "core-js": "^3.0.0",
        "node-sass": "^4.13.1",
        "regenerator-runtime": "^0.13.2",
        "sass-loader": "^7.3.1",
        "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"
    }
}

and composer.json:

{
    "type":         "project",
    "license":      "proprietary",
    "require":      {
        "php": "^7.2.5",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "doctrine/annotations": "^1.8",
        "liip/imagine-bundle": "^2.3",
        "nelmio/cors-bundle": "^2.0",
        "ramsey/uuid": "^3.9",
        "symfony/apache-pack": "^1.0",
        "symfony/console": "5.0.*",
        "symfony/dotenv": "5.0.*",
        "symfony/flex": "^1.3.1",
        "symfony/form": "5.0.*",
        "symfony/framework-bundle": "5.0.*",
        "symfony/monolog-bundle": "^3.5",
        "symfony/orm-pack": "^1.0",
        "symfony/security-bundle": "5.0.*",
        "symfony/serializer-pack": "^1.0",
        "symfony/twig-pack": "^1.0",
        "symfony/validator": "5.0.*",
        "symfony/webpack-encore-bundle": "^1.7",
        "symfony/yaml": "5.0.*"
    },
    "require-dev":  {
        "symfony/maker-bundle":  "^1.14",
        "symfony/profiler-pack": "^1.0",
        "symfony/var-dumper":    "5.0.*"
    },
    "config":       {
        "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-php72":  "*",
        "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"
        ],
        "migrate":          "php bin/console make:migration && php bin/console doctrine:migrations:migrate",
        "watch":            "yarn encore dev --watch"
    },
    "conflict":     {
        "symfony/symfony": "*"
    },
    "extra":        {
        "symfony": {
            "allow-contrib": false,
            "require":       "5.0.*"
        }
    }
}

I've tried uninstalling and reinstalling several of the related packages but can't seem to get past this error.

[monkeyArms]

Please disregard - I see now that I had accidentally installed the react-scripts package which requires css-loader 3. Removed that package and all is well.

[weaverryan]

Cheers!

[neokdev]

You still can use css-loader ^3.5.0,, just add in your webpack.config.js:

Encore
// Fix CSS-loader v3 error option that is automatically injected by webpack
  .configureCssLoader((options) => {
    delete options.localIdentName;
  })

I got the error whereas I don't have react-scripts installed, my package.json:

{
    "devDependencies": {
        "@babel/preset-react": "^7.8.3",
        "@symfony/webpack-encore": "^0.28.2",
        "core-js": "^3.0.0",
        "css-loader": "^3.5.0",
        "eslint": "^6.8.0",
        "eslint-config-airbnb": "^18.0.1",
        "eslint-plugin-import": "^2.20.1",
        "eslint-plugin-jsx-a11y": "^6.2.3",
        "eslint-plugin-react": "^7.19.0",
        "eslint-plugin-react-hooks": "^1.7.0",
        "regenerator-runtime": "^0.13.2",
        "webpack-notifier": "^1.6.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server --https --pfx=%UserProfile%\\.symfony\\certs\\default.p12",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress"
    },
    "dependencies": {
        "@date-io/date-fns": "^1.3.13",
        "@hapi/joi": "^17.1.1",
        "@material-ui/core": "^4.9.5",
        "@material-ui/icons": "^4.9.1",
        "@material-ui/pickers": "^3.2.10",
        "cross-fetch": "^3.0.4",
        "date-fns": "^2.11.0",
        "html5-file-selector": "^2.1.0",
        "prop-types": "^15.7.2",
        "react": "^16.13.0",
        "react-dom": "^16.13.0",
        "react-dropzone-uploader": "^2.11.0",
        "react-hook-form": "^5.2.0",
        "react-number-format": "^4.4.1",
        "react-signature-canvas": "^1.0.3"
    }
}

[hmbilal]

Webpack encore requires version 7.0.1 of sass-loader. I installed latest one 8.0.2 and encountered same problem.

Installing correct version with yarn add sass-loader@^7.0.1 node-sass --dev fixed the problem.

[Sci4Tech]

Webpack encore requires version 7.0.1 of sass-loader. I installed latest one 8.0.2 and encountered same problem.

Installing correct version with yarn add sass-loader@^7.0.1 node-sass --dev fixed the problem.

Thank you very much for this answer, it still work on my project