ValidationError: Invalid options object. CSS Loader has been initialised using an options object that does not match the API schema

Admin 1
Viewed 11571

I am using @zeit/next-css to import css files into my components and pages file but it's throwing me this error

./styles/navbar.css importing this css file in my navbar.js in components and I'm getting this error

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

my next.config.js is placed where package.json is 

const withCSS = require("@zeit/next-css");
module.exports = withCSS();

my package json

{
  "name": "transfer-to",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@zeit/next-css": "^1.0.1",
    "isomorphic-unfetch": "^3.0.0",
    "next": "9.0.7",
    "react": "16.10.2",
    "react-dom": "16.10.2"
  }
}
next.js reactjs javascript
5 Answers

I faced same issue after upading css-loader but I solved it.

If you check css-loader readme, then I noticed that "localIdentName" moved into modules key (it is possible that isn't a recent change, just my artifacts were old). My current working config is:

{
    loader: require.resolve('css-loader'),
    options: {
        importLoaders: 1,
        modules: true,
        modules : {
        localIdentName: '[name]__[local]__[hash:base64:5]',
        },
    },
},

Old wrong config was:

{
    loader: "css-loader",
    options: {
        modules: true,
        localIdentName: "[name]__[local]___[hash:base64:5]",
        sourceMap: isDevelopment
    }
}
user_134885380

For temporary fix your problem, remove "^" symbol from these packages:

"dependencies": {
    "@zeit/next-css": "1.0.1",
    "@zeit/next-sass": "1.0.1",
    "next": "9.0.2",
    "node-sass": "4.12.0"
    ...
  }

It looks like a buggy updated version for these packages.

user_57379500

In the webpack.config.js

{
          test: cssRegex,
          exclude: cssModuleRegex,
          use: getStyleLoaders({
            importLoaders: 1,
            sourceMap: isEnvProduction && shouldUseSourceMap,
            modules: true,
            //localIdentIName: '[name]__[local]__[hash:base64:5]'
          }),
          sideEffects: true,
    }

I commented on localIdentName and it worked.

//localIdentIName: '[name][local][hash:base64:5]'

It might be wrong to comment on it. But I need to still investigate more about it.

If I add it gives:-

ValidationError: Invalid options object. CSS Loader has been initialised using an options object that does not match the API schema.

  • options has an unknown property 'minimize'. These properties are valid: object { url?, import?, modules?, sourceMap?, importLoaders?, localsConvention?, onlyLocals? }
user_49023220

If you are doing the changes in config file for load css. Then your object should be like Below
My React version is 6.14.11

       {
          test: cssRegex,
          exclude: cssModuleRegex,
          use: getStyleLoaders({
            importLoaders: 1,
            sourceMap: isEnvProduction
              ? shouldUseSourceMap
              : isEnvDevelopment,
            modules : {
              localIdentName: '[name]__[local]__[hash:base64:5]',
            },
          }),
user_121643310

My web pack config had an issue with spelling

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

I used module instead of modules. Hopefully this helps someone.

user_25052130
Related