javascript - ValidationError: Invalid options object. CSS Loader has been initialised using an options object that does not matc

admin管理员组

文章数量:1339481

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

./styles/navbar.css importing this css file in my navbar.js in ponents 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"
  }
}

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

./styles/navbar.css importing this css file in my navbar.js in ponents 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"
  }
}

• javascript
• reactjs
• next.js

Share Improve this question Follow edited Oct 4, 2019 at 23:20 George Z. 6,83844 gold badges3232 silver badges5353 bronze badges asked Oct 4, 2019 at 17:08 user12143749user12143749 1

• I haven't any problem until today, suddenly after yarn dev I faced with this issue – nima Commented Oct 5, 2019 at 14:54

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 7

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
    }
}

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.

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 mented on localIdentName and it worked.

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

It might be wrong to ment 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? }

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]',
            },
          }),

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.

I was facing same issue, 'ValidationError: Invalid options object. CSS Loader has been initialised using an options object that does not match the API schema.' I tried all solutions,but those couldn't work for me I removed all those two lines:

module:true

localIdentName: '[name][local][hash:base64:5]',

and I created layout css file with name ,let's say layout.module.css and in js file, I import it like, and use like below

 import  classes from './Layout.module.css'
<main className={classes.Content}>
    {props.children}
</main>

so i think this apporoach is suitable for latest react version

hope this will help to you also

本文标签：