Skip to content
This repository has been archived by the owner. It is now read-only.

CSS Loader Invalid Options Error #392

Closed
Tyguy160 opened this issue Feb 2, 2019 · 39 comments
Closed

CSS Loader Invalid Options Error #392

Tyguy160 opened this issue Feb 2, 2019 · 39 comments

Comments

@Tyguy160
Copy link

@Tyguy160 Tyguy160 commented Feb 2, 2019

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
Copy link

@luankefei luankefei commented Feb 14, 2019

+1. this error happend from css-loader 2.0.0

Loading

@popuguytheparrot
Copy link

@popuguytheparrot popuguytheparrot commented Feb 19, 2019

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

Loading

@chuyik
Copy link

@chuyik chuyik commented Feb 20, 2019

Link related PR #350 to this issue.

Loading

@alexander-akait
Copy link

@alexander-akait alexander-akait commented Mar 15, 2019

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

Loading

@looneydevs
Copy link

@looneydevs looneydevs commented Mar 16, 2019

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

Loading

@alexander-akait
Copy link

@alexander-akait alexander-akait commented Mar 16, 2019

@sergaunt please create minimum reproducible test repo, thanks!

Loading

@szpasztor
Copy link

@szpasztor szpasztor commented Mar 16, 2019

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

Loading

@efleurine
Copy link

@efleurine efleurine commented Mar 22, 2019

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

Loading

@marcusstenbeck

This comment has been hidden.

@marbiano
Copy link

@marbiano marbiano commented Mar 30, 2019

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

Loading

@Aid19801
Copy link

@Aid19801 Aid19801 commented Apr 5, 2019

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

Loading

@sanzhardanybayev
Copy link

@sanzhardanybayev sanzhardanybayev commented Apr 11, 2019

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

Loading

@sanzhardanybayev
Copy link

@sanzhardanybayev sanzhardanybayev commented Apr 11, 2019

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

Loading

@alexander-akait
Copy link

@alexander-akait alexander-akait commented Apr 11, 2019

npm cache

Loading

@sanzhardanybayev
Copy link

@sanzhardanybayev sanzhardanybayev commented Apr 11, 2019

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

Loading

@jnv
Copy link

@jnv jnv commented Aug 15, 2019

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: 12cd9d2#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.

Loading

@KnightYoshi
Copy link

@KnightYoshi KnightYoshi commented Sep 10, 2019

@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. 😫

Loading

@goranefbl
Copy link

@goranefbl goranefbl commented Sep 17, 2019

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

Loading

@KnightYoshi
Copy link

@KnightYoshi KnightYoshi commented Sep 17, 2019

Yep, I tried next-sass last night.

Loading

@goranefbl
Copy link

@goranefbl goranefbl commented Sep 18, 2019

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

Loading

@andezzat
Copy link

@andezzat andezzat commented Oct 2, 2019

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.

Loading

@KnightYoshi
Copy link

@KnightYoshi KnightYoshi commented Oct 2, 2019

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

Loading

@andezzat
Copy link

@andezzat andezzat commented Oct 2, 2019

@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 css-loader@3.2.0 the second pass around.
And now it's erroring again :)

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

Loading

@andezzat
Copy link

@andezzat andezzat commented Oct 2, 2019

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

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

What I reckon is causing this issue in next@9.0.7 is the addition of the css-loader@3.2.0 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...

Loading

@wulfmann
Copy link

@wulfmann wulfmann commented Oct 2, 2019

next @9.0.6 does not have the issue either.

Loading

@KnightYoshi
Copy link

@KnightYoshi KnightYoshi commented Oct 2, 2019

@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.

Loading

@andezzat
Copy link

@andezzat andezzat commented Oct 2, 2019

@wulfmann & @KnightYoshi

As per my dissection comment above: please try installing @zeit/next-css@1.0.2-canary.2
Can confirm (tested multiple times), this fixed the issue for me!

Loading

@atombender
Copy link

@atombender atombender commented Oct 2, 2019

@andezzat Still failing for me.

Loading

@devdudeio
Copy link

@devdudeio devdudeio commented Oct 2, 2019

I can confirm using @zeit/next-css@1.0.2-canary.2 is working for me without using the fix.

Loading

@KnightYoshi
Copy link

@KnightYoshi KnightYoshi commented Oct 3, 2019

Thanks @andezzat

Using @zeit/next-css@1.0.2-canary.2 works, same for @zeit/next-less@1.0.2-canary.2, and I assume the Sass one will as well (haven't tested, yet).

Loading

@atombender
Copy link

@atombender atombender commented Oct 3, 2019

@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 css-loader@1.0.0.

If I upgrade to css-loader@3.2, 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?

Loading

@hackneycrypto

This comment has been hidden.

@Timer
Copy link
Member

@Timer Timer commented Oct 4, 2019

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

Loading

@Timer Timer closed this Oct 4, 2019
@andezzat
Copy link

@andezzat andezzat commented Oct 5, 2019

@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?

Loading

@digital-genba
Copy link

@digital-genba digital-genba commented Oct 5, 2019

Next 9.0.7 is broken. It needs to be fixed.

Loading

@timneutkens
Copy link
Member

@timneutkens timneutkens commented Oct 5, 2019

@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.

Loading

@digital-genba
Copy link

@digital-genba digital-genba commented Oct 5, 2019

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

Loading

@timneutkens
Copy link
Member

@timneutkens timneutkens commented Oct 5, 2019

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.

Loading

@digital-genba
Copy link

@digital-genba digital-genba commented Oct 5, 2019

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.

Loading

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet