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

p3x-robot · 2018-12-09T11:58:56Z

Operating System: Linux workstation 4.15.0-42-generic added query parameter url=false #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

The text was updated successfully, but these errors were encountered:

p3x-robot · 2018-12-09T12:12:27Z

no issue in 1.0.1

alveshelio · 2018-12-10T00:51:27Z

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

wanliyunyan · 2018-12-10T01:59:19Z

I have the same issue too.

Uncaught Error: Module build failed (from ./node_modules/_mini-css-extract-plugin@0.5.0@mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/_css-loader@2.0.0@css-loader/dist/cjs.js):
ValidationError: CSS Loader Invalid Options

options should NOT have additional properties
....

alexander-akait · 2018-12-10T08:53:35Z

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

wanliyunyan · 2018-12-10T09:23:09Z

@evilebottnawi thank you! That is to say , css-loader@2.0.0 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 · 2018-12-10T09:27:25Z

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 · 2018-12-10T09:27:36Z

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 · 2018-12-10T09:39:18Z

@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 · 2018-12-10T10:31:26Z

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 · 2018-12-10T10:33:17Z

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

p3x-robot · 2018-12-10T10:34:26Z

@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 · 2018-12-10T10:35:09Z

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

p3x-robot · 2018-12-10T10:45:59Z

other guys have already provided repro, isnt it enough?

p3x-robot · 2018-12-10T10:46:12Z

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

alexander-akait · 2018-12-10T10:49:50Z

@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 · 2018-12-10T10:52:10Z

@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 · 2018-12-10T10:56:31Z

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

p3x-robot · 2018-12-10T10:57:07Z

thank you very much

alexander-akait · 2018-12-10T13:35:37Z

@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 · 2018-12-10T13:44:54Z

@p3x-robot reproduced, WIP

alexander-akait · 2018-12-10T13:52:28Z

@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 · 2018-12-10T13:59:01Z

Solved. Feel free to feedback.

p3x-robot · 2018-12-10T15:06:51Z

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

AnderssonChristian · 2018-12-12T13:46:16Z

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

p3x-robot · 2018-12-12T13:48:09Z

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 · 2018-12-12T14:16:08Z

@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 · 2018-12-12T14:31:05Z

got it, thanks!

alexander-akait · 2019-03-14T09:40:44Z

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

alexander-akait · 2019-03-14T09:41:08Z

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

sleagon · 2019-03-15T11:34:57Z

@BerekHalfhand minimize has been removed, just take a look at this issue: webpack-contrib/extract-text-webpack-plugin#434

ninamorena · 2019-03-21T01:39:26Z

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

as it does not work in current version and causes error. Ref: webpack-contrib/css-loader#863

bhavyaw · 2019-06-12T12:36:28Z

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 · 2019-06-14T21:20:12Z

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 · 2019-06-18T06:17:53Z

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 · 2019-06-29T09:45:52Z

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

krupa147 · 2019-07-04T12:36:20Z

I am facing the same issue with version 3.0.0

ThugDebugger · 2019-07-05T19:39:32Z

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 · 2019-07-06T21:36:01Z

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 · 2019-07-07T20:34:52Z

@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 css-loader@1.0.1

manuelbieh · 2019-07-08T14:09:21Z

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 · 2019-07-08T14:10:55Z

@manuelbieh

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

alexander-akait · 2019-07-08T14:11:28Z

Strongly recommend don't use random

alexander-akait · 2019-07-08T14:12:19Z

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 · 2019-07-08T14:13:09Z

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 · 2019-07-08T14:18:10Z

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 · 2019-07-08T14:23:00Z

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 · 2019-07-09T14:15:01Z

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

yangfan-coder · 2019-09-12T03:02:21Z

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

krrskl · 2019-11-01T19:28:57Z

This worked for my VUE Js project:

Browse to the /build/utils.js file and in the object of the css-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',

alexander-akait added the flag: Needs more info label Dec 10, 2018

alexander-akait closed this as completed Dec 10, 2018

digitalkaoz mentioned this issue Dec 17, 2018

fix css-loader 2.0 version breaks (removed minimize option) react-static/react-static#884

Merged

8 tasks

ZakarFin mentioned this issue Mar 25, 2019

Update to latest dependency versions oskariorg/oskari-frontend#832

Merged

kapeter mentioned this issue Apr 3, 2019

beidou-webpack打包less报错：CSS Loader Invalid Options alibaba/beidou#164

Closed

vipranarayan14 added a commit to vipranarayan14/vtranslit-web that referenced this issue Apr 4, 2019

remove minimize option to 'css-loader'

2a21b43

as it does not work in current version and causes error. Ref: webpack-contrib/css-loader#863

Arne117 referenced this issue in Arne117/FU-User-Centered-Design-2019 Apr 26, 2019

Updated dependencies

8c2f830

antidecaf mentioned this issue Apr 29, 2019

Update css-loader to the latest version 🚀 SpareBank1/designsystem#540

Closed

peioe mentioned this issue May 29, 2019

Can't run build after updating Flood-UI/flood#805

Closed

3 tasks

zedtux mentioned this issue Jul 5, 2019

Webpacker + Vue compiled failed rails/webpacker#2162

Closed

mzemel mentioned this issue Jul 11, 2019

Removes minimize: true from CSS loader webpack config newhavenio/newhavenio.github.io#120

Closed

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

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

Comments

p3x-robot commented Dec 9, 2018

Expected Behavior

Actual Behavior

Code

How Do We Reproduce?

p3x-robot commented Dec 9, 2018

alveshelio commented Dec 10, 2018

wanliyunyan commented Dec 10, 2018 • edited Loading

alexander-akait commented Dec 10, 2018

wanliyunyan commented Dec 10, 2018

fpsqdb commented Dec 10, 2018 • edited Loading

wanliyunyan commented Dec 10, 2018

alexander-akait commented Dec 10, 2018 • edited Loading

p3x-robot commented Dec 10, 2018

alexander-akait commented Dec 10, 2018 • edited Loading

p3x-robot commented Dec 10, 2018

alexander-akait commented Dec 10, 2018

p3x-robot commented Dec 10, 2018

p3x-robot commented Dec 10, 2018

alexander-akait commented Dec 10, 2018

p3x-robot commented Dec 10, 2018 • edited Loading

alexander-akait commented Dec 10, 2018

p3x-robot commented Dec 10, 2018

alexander-akait commented Dec 10, 2018 • edited Loading

alexander-akait commented Dec 10, 2018

alexander-akait commented Dec 10, 2018

alexander-akait commented Dec 10, 2018

p3x-robot commented Dec 10, 2018

AnderssonChristian commented Dec 12, 2018

p3x-robot commented Dec 12, 2018

alexander-akait commented Dec 12, 2018

p3x-robot commented Dec 12, 2018

alexander-akait commented Mar 14, 2019

alexander-akait commented Mar 14, 2019

sleagon commented Mar 15, 2019

ninamorena commented Mar 21, 2019

bhavyaw commented Jun 12, 2019 • edited Loading

JonDum commented Jun 14, 2019

spiffre commented Jun 18, 2019

shahidkarimi commented Jun 29, 2019

krupa147 commented Jul 4, 2019

ThugDebugger commented Jul 5, 2019 • edited Loading

techieanant commented Jul 6, 2019

dparkar commented Jul 7, 2019 • edited Loading

manuelbieh commented Jul 8, 2019

alexander-akait commented Jul 8, 2019 • edited Loading

alexander-akait commented Jul 8, 2019

alexander-akait commented Jul 8, 2019

manuelbieh commented Jul 8, 2019

manuelbieh commented Jul 8, 2019

manuelbieh commented Jul 8, 2019

funlee commented Jul 9, 2019 • edited Loading

yangfan-coder commented Sep 12, 2019

krrskl commented Nov 1, 2019

wanliyunyan commented Dec 10, 2018 •

edited

Loading

fpsqdb commented Dec 10, 2018 •

edited

Loading

alexander-akait commented Dec 10, 2018 •

edited

Loading

alexander-akait commented Dec 10, 2018 •

edited

Loading

p3x-robot commented Dec 10, 2018 •

edited

Loading

alexander-akait commented Dec 10, 2018 •

edited

Loading

bhavyaw commented Jun 12, 2019 •

edited

Loading

ThugDebugger commented Jul 5, 2019 •

edited

Loading

dparkar commented Jul 7, 2019 •

edited

Loading

alexander-akait commented Jul 8, 2019 •

edited

Loading

funlee commented Jul 9, 2019 •

edited

Loading