Next-plugins: CSS Loader Invalid Options Error

[Tyguy160]

When loading in a CSS file from node_modules using the next.config.js file here, the following error is generated on compile:

./node_modules/react-table/react-table.css
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 should NOT have additional properties

In referencing the suggestion from @truonghoangphuc here, I commented out minimize: !dev, in css-loader-config.js in node_modules/@zeit/next-css/css-loader-config.js

const cssLoader = {
    loader: isServer ? 'css-loader/locals' : 'css-loader',
    options: Object.assign(
      {},
      {
        modules: cssModules,
        //minimize: !dev,
        sourceMap: dev,
        importLoaders: loaders.length + (postcssLoader ? 1 : 0),
      },
      cssLoaderOptions
    ),
  };

I've confirmed that commenting that line out makes CSS loading work again and the errors go away.

[luankefei]

+1. this error happend from css-loader 2.0.0

[popuguytheparrot]

dont update to css-loader to v2. Inside using v1

[chuyik]

Link related PR https://github.com/zeit/next-plugins/pull/350 to this issue.

[alexander-akait]

cssLoaderOptions contains something wrong, can you do console.log(cssLoaderOptions)?

[loonskai]

Also got this error while using withCss. Error disappeared after downgrading css-loader.

[alexander-akait]

@sergaunt please create minimum reproducible test repo, thanks!

[szpasztor]

I also got this error while using withCss. Commenting out minimize and downgrading css-loader to v1.0.1 both solved the issue.

[efleurine]

@szpasztor if you comment out minimze then you won't have minize file in the end right?

[marcusstenbeck]

This workaround removes the minimize option from all css-loader entries in the Webpack config. I hope someone finds it useful.

// next.config.js
const withCSS = require('@zeit/next-css');

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

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

Using [email protected] and @zeit/[email protected].

[marbiano]

I can confirm that hack is not needed with @zeit/next-css@canary.

[Aid19801]

i used the hack. sorted it right out. cheers.

[sanzhardanybayev]

I don't even have minimize option but still get the same error 😕

[sanzhardanybayev]

Installing packages via yarn solved the problem. What the heck? 🤯

[alexander-akait]

npm cache

[sanzhardanybayev]

@evilebottnawi that was a fresh install. So I don't think that the problem is in cache

[jnv]

I ran into the same issue with next-less, upgrading to canary version also fixed it (as it depends on canary version of next-css). However, currently there seems to be a mismatch between versions and npm tag for canary versions of CSS-related packages as pointed out here: https://github.com/zeit/next-plugins/commit/12cd9d28905b63a1b90848f3e494dc3fb7465224#commitcomment-33755090.
So installing @zeit/next-css@canary gives you 0.2.1-canary.4 while the actual version of next canary release is 1.0.2-canary.2. I _think_ the contents of packages should be the same, just pay attention if the package versions get corrected in the future.

[KnightYoshi]

@jnv Even when installing @zeit/next-css@canary it still complains

[ error ] ../node_modules/antd/dist/antd.less
ValidationError: Invalid options object. CSS Loader has been initialised using an options object that does not match the API schema.

Using

"@zeit/next-css": "^0.2.1-canary.4",
"@zeit/next-less": "^0.3.1-canary.4",

next.config.js

module.exports = () => {  /* eslint-disable */
    const withLess = require('@zeit/next-less')
    const lessToJS = require('less-vars-to-js')
    const fs = require('fs')
    const path = require('path')  // Where your antd-custom.less file lives
    const themeVariables = lessToJS(
        fs.readFileSync(path.resolve(__dirname, './src/assets/site.less'), 'utf8')
    )

    // fix: prevents error when .less files are required by node
    if (typeof require !== 'undefined') {
        require.extensions['.less'] = file => {}
    }

    return withLess({
            lessLoaderOptions: {
            javascriptEnabled: true,
            modifyVars: themeVariables // make your antd custom effective
        }
    })
};

I'm trying to get Ant Design styles written in Less to be correctly imported, but to no avail. 😫

[goranefbl]

Same is with next-sass, loader needs fixing or updating.

[KnightYoshi]

Yep, I tried next-sass last night.

[goranefbl]

The solution from @marcusstenbeck works, but I could not find minimize option inside css-loader in node_modules, or it is inside some other package...

[andezzat]

I had this issue...
Upgrading to the latest next (9.0.7) introduced it..
Then upgrading to the latest @zeit/next-css (1.0.1) fixed it!

EDIT: I was wrong! Still broken, my yarn just didn't get the latest css-loader version the first time.

[KnightYoshi]

@andezzat Share your config/setup, because using the "latest" versions does not fix anything.

I've tried with all three packages and get the same result. You're getting different results than the rest of us.

"@zeit/next-css": "^1.0.1",
"@zeit/next-less": "^1.0.1",
"@zeit/next-sass": "^1.0.1",
...
"next": "^9.0.7",

// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS()

import '../../assets/styles.css';

./assets/styles.css
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? }

[andezzat]

@KnightYoshi Apologies, you're right!
I ran yarn add something to get a package, and suddenly it came back.

I'm pretty sure it only realised it needs [email protected] the second pass around.
And now it's erroring again :)

I'm going to investigate why this minimize option isn't being dropped.

[andezzat]

Ok... so here's what I know so far
I hope this is helpful to @zeit staff.

1. I'm on [email protected]
2. I update to [email protected] & get the minimize css-loader error
3. I update to @zeit/[email protected] which fixes the issue as it removes the minimize flag from the options (despite using [email protected], which shouldn't error for this!)

What I reckon is causing this issue in [email protected] is the addition of the [email protected] as a dependency & its usage in the webpack config's module.rules:
https://github.com/zeit/next.js/blob/2c7b4d8aaac475f81de21c0e9cb40fdea1a7a178/packages/next/build/webpack-config.ts#L339

That's as far as I have time to look into this...

[wulfmann]

next @9.0.6 does not have the issue either.

[KnightYoshi]

@wulfmann 9.0.5—9.0.7 all have the same issue. I started on 9.0.5 and upgraded to 9.0.6 and then 9.0.7. All of which generate the same _CSS loader invalid config_ issue.

It's an issue with the plugins, not Next itself.

[andezzat]

@wulfmann & @KnightYoshi

As per my dissection comment above: please try installing @zeit/[email protected]
Can confirm (tested multiple times), this fixed the issue for me!

[atombender]

@andezzat Still failing for me.

[dude-awesome]

I can confirm using @zeit/[email protected] is working for me without using the fix.

[KnightYoshi]

Thanks @andezzat

Using @zeit/[email protected] works, same for @zeit/[email protected], and I assume the Sass one will as well (haven't tested, yet).

[atombender]

@andezzat Correction, I didn't upgrade @zeit/next-sass to the same canary release. After upgrading that, I no longer get the error — as long as I have [email protected].

If I upgrade to [email protected], everything breaks:

Module not found: Can't resolve 'css-loader/locals'

No idea where this comes from, since there's no stack trace. It's odd, since my code doesn't reference css-loader at all, and Next.js already depends on 3.2. But presumably, if Next's WebPack config references css-loader by _string_, it will probably get it from my dependencies, not Next.js's?

[hackneycrypto]

This workaround removes the minimize option from all css-loader entries in the Webpack config. I hope someone finds it useful.

// next.config.js
const withCSS = require('@zeit/next-css');

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

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

Using [email protected] and @zeit/[email protected].

Installed Hack - worked for me

[Timer]

This has been fixed in next@^9.0.8-canary.5 and newer!

[andezzat]

@Timer sure!

But shouldn't breaking changes like these be part of stable releases so people don't run around in circles like they did in this thread trying to figure out what's broken?

[orourkea2017]

Next 9.0.7 is broken. It needs to be fixed.

[timneutkens]

@orourkea2017

This has been fixed in next@^9.0.8-canary.4 and newer!

It already is fixed. Just pending stable release. Please try it out.

[orourkea2017]

A timeframe @timneutkens?? A bugfix is no use in beta.

[timneutkens]

The way you're communicating is kind of weird. But we don't release on weekends and no one communicated back that it works so we were waiting a bit to see if other issues pop up.

[orourkea2017]

Okay, thank you. I apologise if I come across as strange - that was not my intention, although I know I am blunt at times. Sorry. I also did not realise it was a weekend - I am in Australia, and while we are on a weekend, I always think that everyone else is miles behind us time-wise. Again, sorry.

I take it we can expect this to be stable in a few days. Thank you, much appreciated.