Css-loader: [2.0.0] ValidationError: CSS Loader Invalid Options - options should NOT have additional properties

[p3x-robot]

• Operating System: Linux workstation 4.15.0-42-generic #45-Ubuntu SMP Thu Nov 15 19:32:57 UTC 2018 x86_64 x86_64 x86_64 GNU/Linux
• Node Version: 11.4.0
• NPM Version: 6.4.1
• webpack Version: latest 4.27.1
• css-loader Version: latest - 2.0.0

Expected Behavior

I can use the css-loader, I have not changed anything.

Actual Behavior

ERROR in ./node_modules/material-design-icons/iconfont/material-icons.css
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: CSS Loader Invalid Options

options should NOT have additional properties

    at validateOptions (/media/linux-nvme/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web-material/node_modules/schema-utils/src/validateOptions.js:32:11)
    at Object.loader (/media/linux-nvme/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web-material/node_modules/css-loader/dist/index.js:44:28)
    at runLoaders (/media/linux-nvme/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web-material/node_modules/webpack/lib/NormalModule.js:301:20)
    at /media/linux-nvme/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web-material/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /media/linux-nvme/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web-material/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at runSyncOrAsync (/media/linux-nvme/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web-material/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
    at iterateNormalLoaders (/media/linux-nvme/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web-material/node_modules/loader-runner/lib/LoaderRunner.js:229:2)
    at iterateNormalLoaders (/media/linux-nvme/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web-material/node_modules/loader-runner/lib/LoaderRunner.js:218:10)
    at /media/linux-nvme/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web-material/node_modules/loader-runner/lib/LoaderRunner.js:233:3
    at context.callback (/media/linux-nvme/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web-material/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.render [as callback] (/media/linux-nvme/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web-material/node_modules/sass-loader/lib/loader.js:76:9)
    at Object.done [as callback] (/media/linux-nvme/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web-material/node_modules/neo-async/async.js:8077:18)
    at options.success (/media/linux-nvme/home/patrikx3/Projects/patrikx3/corifeus/corifeus-web-material/node_modules/node-sass/lib/index.js:308:32)
 @ ./node_modules/material-design-icons/iconfont/material-icons.css

Code

  // webpack.config.js
  // If your bitchin' code blocks are over 20 lines, please paste a link to a gist
  // (https://gist.github.com).

        rules: [
            {
                test: /\.less$/,
                use: [{
                    loader: 'style-loader' ,
                }, {
                    loader: 'css-loader',
                }, {
                    loader: 'less-loader',
                }],
            },

How Do We Reproduce?

It happens with css-loader 2.0.0

[p3x-robot]

no issue in 1.0.1

[alveshelio]

I have the same issue, I can confirm that in version 1.0.1 it works well

[wanliyunyan]

I have the same issue too.

Uncaught Error: Module build failed (from ./node_modules/[email protected]@mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/[email protected]@css-loader/dist/cjs.js):
ValidationError: CSS Loader Invalid Options

options should NOT have additional properties
....

[alexander-akait]

hm, looks you have plugin what add more options to css-loader, somebody can provide full config or minimum reproducible test repo?

[wanliyunyan]

@evilebottnawi thank you! That is to say , [email protected] add verification of illegal parameters

{
            loader: 'css-loader',
            options: {
              importLoaders: 2,
              modules: true,
              // namedExport: true, // this is  invalid Options ,I find it
              camelCase: true,
              localIdentName: '[path][name]__[local]--[hash:base64:5]',
            },
          }

[fpsqdb]

Same issue here

const cssLoader = {
    loader: "css-loader"
};

cssLoader.options = {
     minimize: true
 };

.........................
                {
                    test: /\.less$/,
                    use: [MiniCssExtractPlugin.loader,
                        cssLoader,
                    {
                        loader: "less-loader",
                        options: {
                            paths: [
                                path.resolve(__dirname, "node_modules")
                            ],
                            javascriptEnabled: true
                        }
                    }]
                }

And works fine if remove minimize: true.

[wanliyunyan]

https://github.com/wanliyunyan/dva-typescript-antd-starter-kit ,this is my config , webpack.base.js is in the build folder. Please advise!

[alexander-akait]

@fpsqdb please don't write Same issue here, it doesn't help to solve issue, better create minimum reproducible test repo
@wanliyunyan thanks, will be fixed in near future

[p3x-robot]

Same issue here

const cssLoader = {
    loader: "css-loader"
};

cssLoader.options = {
     minimize: true
 };

.........................
                {
                    test: /\.less$/,
                    use: [MiniCssExtractPlugin.loader,
                        cssLoader,
                    {
                        loader: "less-loader",
                        options: {
                            paths: [
                                path.resolve(__dirname, "node_modules")
                            ],
                            javascriptEnabled: true
                        }
                    }]
                }

And works fine if remove minimize: true.

for me it i still have this error when i do not even use minimize.

[alexander-akait]

@p3x-robot minimize will be remove in 1 version, you don't need this option, just remove

[p3x-robot]

@evilebottnawi that's what i am saying, i do not even use this option and it error happens with production webpack flag or webpack-dev-server.

[alexander-akait]

@p3x-robot need repo, looks other loader or plugin add option

[p3x-robot]

other guys have already provided repro, isnt it enough?

[p3x-robot]

i am fine with 1.0.1, as long as it works.

[alexander-akait]

@p3x-robot you can have other problemы and if you want so solve issue quickly will be great to see you minimum reproducible test repo

[p3x-robot]

@evilebottnawi

git clone https://github.com/patrikx3/gitlist

# change package.json css-loader from 1.0.1 to 2.0.0

npm install
npm run build

than you get this error. with v1.0.1, no error.

[alexander-akait]

@p3x-robot thanks, will be fixed today and released

[p3x-robot]

thank you very much

[alexander-akait]

@wanliyunyan can't reproduce, in future please add instruction how i can reproduce problem, you project is not small and i just losing time trying to reproduce.

P.S. use english in future and in minimum reproducible repo, my native language is Russian and i don't think what will be convenient for you if I start chatting and writing on it . Thanks!

[alexander-akait]

@p3x-robot reproduced, WIP

[alexander-akait]

@p3x-robot remove this line https://github.com/patrikx3/gitlist/blob/master/webpack.config.js#L211 (minimize will be removed in 1 version)

[alexander-akait]

Solved. Feel free to feedback.

[p3x-robot]

it works ! works in my all 4 repos. thanks so much!!!!!!!!!!!!!!!!!!!!!!!!

[AnderssonChristian]

Can confirm that removing minimize option completely from the config resolved this issue for me.

[p3x-robot]

my only problem is, that now the css is not uglified:
https://pages.corifeus.com/bundle.fcfeb3b8e792bb203e29.css

@evilebottnawi
with the minimize, it was uglified, and now it is not.

[alexander-akait]

@p3x-robot use https://github.com/NMFR/optimize-css-assets-webpack-plugin for css minimication, minimize will be removed in v1, now we have v2

[p3x-robot]

got it, thanks!

[mhauens]

Same problem with NextJs default config

[alexander-akait]

@mrsteele how Same problem with NextJs default config can help solve issue? Please don't spam, you can investigate (just add console.log(options) here https://github.com/webpack-contrib/css-loader/blob/master/src/index.js#L36 and look on your options and search what is wrong, note we use babel, i.e. original file and traspiled file can be difference) and fix problem on your side or create issue if problem in loader

[truonghoangphuc]

Same problem with NextJs default config

Hi @mhauens

For NextJS, please check this file: ..[email protected]

from row 70 to 82

const cssLoader = {
loader: isServer ? 'css-loader/locals' : 'css-loader',
options: Object.assign(
{},
{
modules: cssModules,
//minimize: !dev,
sourceMap: dev,
importLoaders: loaders.length + (postcssLoader ? 1 : 0)
},
cssLoaderOptions
)
}

and comment or remove minimize option.

[vcavallo]

Hello
I don't have _any_ options set explicitly in my css-loader declaration. Is it possible something down the line is injecting options in? I'm using Vue and Vuetify.

The error I'm getting:

    ERROR in ./node_modules/css-loader/dist/cjs.js?minimize!./node_modules/vue-loader/lib/style-compiler?{"optionsId":"0","vue":true,"id":"data-v-0d62932e","scoped":true,"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./app/javascript/packs/components/dashboard/time-clock.vue
    Module build failed: ValidationError: CSS Loader Invalid Options

    options should NOT have additional properties

        at validateOptions (/[project path stuff]/node_modules/css-loader/node_modules/schema-utils/src/validateOptions.js:32:11)
        at Object.loader (//[project path stuff]/node_modules/css-loader/dist/index.js:44:28)

Any help would be much appreciated as this is breaking the build for me.
Thanks! Let me know what other information you'd need from me.

package.json:
```package.json
{
"name": "vss-rails-vue",
"private": true,
"scripts": {
"test": "jest"
},
"jest": {
"verbose": true,
"testURL": "http://localhost/",
"roots": [
"spec/javascript"
],
"moduleDirectories": [
"node_modules",
"app/javascript"
],
"moduleNameMapper": {
"^@/(.)$": "app/javascript/$1"
},
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"transform": {
"^.+\.js$": "/node_modules/babel-jest",
".\.(vue)$": "/node_modules/vue-jest"
},
"snapshotSerializers": [
"/node_modules/jest-serializer-vue"
]
},
"dependencies": {
"@babel/plugin-proposal-object-rest-spread": "^7.2.0",
"@rails/webpacker": "3.5",
"@vue/babel-preset-app": "^3.2.0",
"babel-loader": "^8.0.4",
"css-loader": "^2.0.0",
"material-design-icons-iconfont": "^4.0.3",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vue": "^2.5.21",
"vue-loader": "14.2.2",
"vue-template-compiler": "^2.5.21",
"vuetify": "^1.3.14",
"@babel/core": "^7.2.0",
"babel-core": "^7.0.0-bridge",
"vue-moment": "^4.0.0"
},
"devDependencies": {
"@vue/test-utils": "^1.0.0-beta.27",
"babel-jest": "^23.6.0",
"jest": "^23.6.0",
"jest-serializer-vue": "^2.0.2",
"vue-jest": "^3.0.2",
"webpack-dev-server": "2.11.2"
},
"resolutions": {
"babel-plugin-transform-object-rest-spread": "^7.0.0-beta.3"
}
}

`yarn.lock`:  
https://pastebin.com/8pvE0f20

`.babelrc`:  
```.babelrc
{
  "presets": [
    "@babel/preset-env",
    ["env", {
      "modules": false,
      "targets": {
        "browsers": "> 1%",
        "uglify": true
      },
      "useBuiltIns": true
    }]
  ],

  "plugins": [
    "@babel/plugin-proposal-object-rest-spread",
    "syntax-dynamic-import",
    "transform-object-rest-spread",
    ["transform-class-properties", { "spec": true }]
  ],

  "env": {
    "test": {
      "presets": [
        ["@babel/preset-env", {
          "targets": {
            "node": "current"
          }
        }]
      ]
    }
  },
}

[BerekHalfhand]

I have this issue on version 2.1.0, without any options at all. Had to downgrade to 1.0.1, which has solved the issue.

[humoyun]

The same issue on version 2.1.1, after removing minimize from options, error was gone

[alexander-akait]

@BerekHalfhand please provide minimum reproducible test repo, css-loader will be incompatibility with webpack

[alexander-akait]

All who have problems please provide minimum reproducible test repo and we fix it

[sleagon]

@BerekHalfhand minimize has been removed, just take a look at this issue: https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/434

[ninamorena]

Unfortunately, I had to downgrade to 1.0.1 from 2.1.1 because this issue is still impacting my builds.

[bhavyaw]

• Proper solution should be the validator should throw easily understandable validation errors.
• Anybody who is still facing this issue just validate the options you have entered with the options schema mentioned under file node_modules\css-loader\dist\options.json.

[JonDum]

Coming across this issue again on 3.0.0

For me, it was localIdentName not being in the options schema. Is this a bug?

localIdentName is mentioned all over the README and docs.

[spiffre]

Had the same issue, but it is indeed explained in the breaking changes section of the v3 changelog:

modules option now can be {Object} and allow to setup CSS Modules options:

• localIdentName option was removed in favor modules.localIdentName option

Which did solve it for me.

[shahidkarimi]

There is not shit like 'minimize:true' in my config.

[krupa147]

I am facing the same issue with version 3.0.0

[ThugDebugger]

To those needing help, just change the key <-> pair like what @eric-miffre mentioned. Here's an example:

Before:
options: { modules: true, localIdentName: "[name]__[local]___[hash:base64:5]", },

After:
options: { modules: { localIdentName: "[name]__[local]___[hash:base64:5]", },

Notice how now you have a modules Object within the options Object. Just put all your previous key <-> value pairs within the modules Object and you'll be good to go

[techieanant]

To those needing help, just change the key <-> pair like what @eric-miffre mentioned. Here's an example:

Before:
options: { modules: true, localIdentName: "[name]__[local]___[hash:base64:5]", },

After:
options: { modules: { localIdentName: "[name]__[local]___[hash:base64:5]", },

Notice how now you have a modules Object within the options Object. Just put all your previous key <-> value pairs within the modules Object and you'll be good to go

Confirmed working. In my case I changed it from

options: { localIdentName: '[hash:base64:5][path]-[local]' }

to

options: { modules: { localIdentName: '[hash:base64:5][path]-[local]' } }

in my webpack/babel config.

[dparkar]

@truonghoangphuc how do you achieve that for production when build automatically installs the css-loader package for next-js ? manipulate the file during build time or is there a way to do it using next.config.js ? For now, I downgraded : npm i -S [email protected]

[manuelbieh]

It suddenly happens in one of my projects too, after I updated all dependencies to their most recent version. Looks like it doesn't have to do anything with the other dependencies being upgraded, because I created a minimal reproducible example and it happens there too:

webpack.config.js

module.exports = {
    entry: './index.js',
    mode: 'production',
    module: {
        rules: [{
            test: /module.css$/,
            use: [{
                loader: require.resolve('css-loader'),
                options: {
                    localsConvention: 'camelCase',
                    modules: true,
                    getLocalIdent: () => {
                        return Math.random().toString(36).substring(2)
                    },
                },
            }]
        }],
    },
}

package.json dependencies:

  "devDependencies": {
    "css-loader": "^2.1.1",
    "webpack": "^4.35.3",
    "webpack-cli": "^3.3.5"
  }

index.js:

const css = require('./test.module.css');
console.log(css);

test.module.css

.html {}

And the build error I get is:

Entrypoint main = main.js
[0] ./src/index.js 60 bytes {0} [built]
[1] ./src/test.module.css 400 bytes {0} [built] [failed] [1 error]

ERROR in ./src/test.module.css
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: CSS Loader Invalid Options

options should NOT have additional properties

    at validateOptions (C:\htdocs\test\mini-webpack\node_modules\schema-utils\src\validateOptions.js:32:11)
    at Object.loader (C:\htdocs\test\mini-webpack\node_modules\css-loader\dist\index.js:44:28)
 @ ./src/index.js 1:12-40
error Command failed with exit code 2

Any idea what's wrong here?!

[alexander-akait]

@manuelbieh

localsConvention: 'camelCase',
modules: {  
  getLocalIdent: () => {
    return Math.random().toString(36).substring(2)
  }
}         

[alexander-akait]

Strongly recommend don't use random

[alexander-akait]

Proper solution should be the validator should throw easily understandable validation errors.

In work, in near future we release new version with better errors

[manuelbieh]

It was just for demonstration 😉 I use react-dev-utils/getCSSModuleLocalIdent, just didn't want to add another external dependencies as potential source of error.

[manuelbieh]

Still doesn't work btw. Now I'm getting:

ValidationError: CSS Loader Invalid Options

options should NOT have additional properties
options.modules should be boolean
options.modules should be string
options.modules should be equal to one of the allowed values
options.modules should match some schema in anyOf

I pushed it into a temporary repo. I don't see what's wrong here?!
https://github.com/manuelbieh/css-loader-issue

[manuelbieh]

Ok, looks like I was mixing 3.0.0 options with 2.1.1. Upgraded to 3.0.0 and it seems to work. Thanks for the ultra fast help!

[funlee]

            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            modules: {
                                localIdentName: "[path][name]__[local]--[hash:base64:5]"
                            }
                        }
                    }
                ]
            }

[yangfan-coder]

I don't know why, but it's okay to upgrade to the latest 3.2.0.

[krrskl]

This worked for my VUE Js project:

Browse to the /build/utils.js file and in the object of thecss-loader comment on the option that is marking you in the error. In my case I had to comment:

minimize: process.env.NODE_ENV === 'production',