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:

[tmohammad78]

I did correct by document and I import ./style.scss file in my js file
but i have this error i asked in stackoverflow but i dont get answer
please help me to fix it

package.json
dependencies{
"@zeit/next-sass": "^1.0.1",
"next": "^9.0.6",
"node-sass": "^4.12.0",
"react": "^16.9.0",
"react-dom": "^16.9.0",
}

next.config.js

const withSass = require('@zeit/next-sass')
module.exports = withSass({
  /* config options here */
})

[arronhunt]

Confirmed, this is a pretty annoying issue. I have a brand new Next project and am getting this error.

thanks for the hack @arunpdl it works great :)

[wilkinnovo]

I came across this issue as well.

adding both @zeit/next-css and @zeit/next-sass
to my project then

in next.config.js :

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

These seem to fix the issue for now.

[nahtnam]

Same issue, I would recommend doing what @arunpdl mentioned

[glauberm]

@Yaolegol solution works for me. Anybody has any idea what might be causing this error?

[andreisocaciu]

Does anybody know when will this be fixed?

[devdudeio]

same issue here but the fix is not working. I am trying to use semantic ui react with next.js

[Calderis]

I was locked few minutes ago with my previous package.json with the same problem. Compilation did not pass on now.sh which was quite a problem.

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

I change for : (removing ^ in order to lock my packages without buggy versions.)

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

I'll set them back once the PR will be merge. It's not the best solution but at least it compiles.

The ^ symbol does install the specified version of the package or above, by removing it you will install the exact version you want to.

Hope it'll help someone 🙄

[Timer]

Please try [email protected] -- this version should fix these broken plugins.

[powderham]

I got this to work using :

[email protected]

and

const withSass = require("@zeit/next-sass");
const withCSS = require("@zeit/next-css");
module.exports = withCSS(
  withSass({
    /* config options here */
  })
);

[naveenkash]

where's the solution for this bug i saw tutorial on youtube they use the smae code but there code is working fine how is that

[saliljnr]

I got this to work using :

[email protected]

and

const withSass = require("@zeit/next-sass");
const withCSS = require("@zeit/next-css");
module.exports = withCSS(
  withSass({
    /* config options here */
  })
);

This is the only solution that worked for me so far... [email protected]_canary.5

[tan-ahmed]

I am facing this issue too

[Timer]

Please upgrade to the latest next@canary which should fix all known variants of CSS issues.

[luvletterldl]

if you need css and stylus,you can update your next.config.js like this:

// next.config.js
const withStylus = require('@zeit/next-stylus')

function HACK_removeMinimizeOptionFromCssLoaders(config) {
  console.warn(
    'HACK: Removing `minimize` option from `css-loader` entries in Webpack config',
  );
  config.module.rules.forEach(rule => {
    if (Array.isArray(rule.use)) {
      rule.use.forEach(u => {
        if (u.loader === 'css-loader' && u.options) {
          delete u.options.minimize;
        }
        if (u.loader === 'stylus-loader' && u.options) {
          delete u.options.minimize;
        }
      });
    }
  });
}

module.exports = withStylus({
  webpack(config) {
    HACK_removeMinimizeOptionFromCssLoaders(config);
    return config;
  },
});

cause it still exist in next 9.1.1.
@Timer

[MathieuLoutre]

Just reporting that I'm having this issue on 9.1.2 with @zeit/next-stylus @Timer. I've used @luvletterldl's workaround for now. Anything I can help with maybe?

[Timer]

We did not patch stylus, feel free to send a PR to Next.js adding the extension!

[Manikjhamb]

I got this to work using :
[email protected]
and

const withSass = require("@zeit/next-sass");
const withCSS = require("@zeit/next-css");
module.exports = withCSS(
  withSass({
    /* config options here */
  })
);

This is the only solution that worked for me so far... [email protected]_canary.5
I think . it is [email protected] . ... typo :)

[dan-cooke]

We are seeing this issue on next 9.2.1 with one of our monorepo packages.

It started occuring after we added a Create React App package, I'm thinking it is to do with conflicting webpack plugins, which is strange as we are using yarn workspaces to manage our dependencies.

It is reproducible everytime we remove our yarn.lock and pull fresh packages from npm using ^ in the package json.

This makes it incredibly difficult to track down the problematic dependency

[satyamurthy515]

Hi,

Even I got this same error. To resolve this I deleted my Node_modules and package-lock.json and installed modules again with npm i. And it resolved for me.

[MarkLyck]

Having this problem on [email protected] and "@zeit/next-css": "^1.0.1", doesn't seem like it has been permanently fixed yet.

Implementing workarounds suggested.

[7iomka]

same issue with latest canary version

[danvoyce]

Getting this issue in 9.5.4

[jooj123]

This should be re-opened - seems to have been reintroduced on next@^10