Css-loader: ValidationError: CSS Loader Invalid Options (css-loader 2.1.1)

[vladeck]

• Operating System: Windows 10 x64 1903
• Node Version: 10.15.3
• NPM Version: 6.4.1
• webpack Version: 4.32.2
• css-loader Version: 2.1.1
• css-modules-typescript-loader: 2.03
• sass-loader: 7.1.0

Expected Behavior

No error.

Actual Behavior

Error:

ERROR in ./***.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: CSS Loader Invalid Options

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

    at validateOptions (E:\Projects\***\node_modules\schema-utils\src\validateOptions.js:32:11)
    at Object.loader (E:\Projects\***\node_modules\css-loader\dist\index.js:44:28)
    at runLoaders (E:\Projects\***\node_modules\webpack\lib\NormalModule.js:302:20)
    at E:\Projects\***\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at E:\Projects\***\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at runSyncOrAsync (E:\Projects\***\node_modules\loader-runner\lib\LoaderRunner.js:143:3)
    at iterateNormalLoaders (E:\Projects\***\node_modules\loader-runner\lib\LoaderRunner.js:232:2)
    at iterateNormalLoaders (E:\Projects\***\node_modules\loader-runner\lib\LoaderRunner.js:221:10)
    at E:\Projects\***\node_modules\loader-runner\lib\LoaderRunner.js:236:3
    at context.callback (E:\Projects\***\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at Object.render [as callback] (E:\Projects\***\node_modules\sass-loader\lib\loader.js:76:9)
    at Object.done [as callback] (E:\Projects\***\node_modules\neo-async\async.js:8067:18)
    at options.success (E:\Projects\***\node_modules\node-sass\lib\index.js:308:32)
 @ ./***.tsx 9:0-26
 @ multi ./***.tsx webpack-hot-middleware/client

Code

module: {
  rules: [
    // ...
    {
      test: /\.scss$/,
      use: [
        MiniCssExtractPlugin.loader,
        {loader: "css-modules-typescript-loader"},
        {
          loader: "css-loader",
          options: {
            modules: {
              localIdentName: "[name]_[local]_[hash:base64]",
            },
            sourceMap: true
          }
        },
        {loader: "sass-loader", options: {sourceMap: true}}
      ]
    },
  ]
},

When using modules: true there is no issue. Is this a bug or a bad configuration? I have followed documentation for css-loader. Please advise.

[sabarasaba]

Im having the exact same issue as well :'(

[vladeck]

Using string works, but I don't understand why using objects doesn't:

{
    test: /\.scss$/,
    use: [
        MiniCssExtractPlugin.loader,
        {loader: "css-modules-typescript-loader"},
        "css-loader?modules&localIdentName=[name]_[local]_[hash:base64]",
        {loader: "sass-loader", options: {sourceMap: true}}
    ]
},

This can be considered as a workaround, but would like for this issue to remain open until someone can shed some light as to why is loader refusing object-based config.

[sabarasaba]

Ah good to know, I ended up downgrading to 1.0.1 for now

[ElForastero]

I've got the same issue.

ValidationError: CSS Loader Invalid Options

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

[alexander-akait]

Because master contain not publish yet version (3.0.0, release will today), for 2 version please use:

 {
          loader: "css-loader",
          options: {
            modules: true,
            localIdentName: "[name]_[local]_[hash:base64]",
            sourceMap: true
          }
        },

[vladeck]

As @evilebottnawi mentioned, until new version is published, some of the options (for v2.1.1) you can use are configured as following:

{
    loader: "css-loader",
    options: {
        modules: true,
        localIdentName: "[name]_[local]_[hash:base64]",
        camelCase: true,
        sourceMap: true
    }
}

[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',