Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS Loader Invalid Options Error #392

Open
Tyguy160 opened this issue Feb 2, 2019 · 16 comments

Comments

@Tyguy160
Copy link

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

This comment has been minimized.

Copy link

commented Feb 14, 2019

+1. this error happend from css-loader 2.0.0

@popuguytheparrot

This comment has been minimized.

Copy link

commented Feb 19, 2019

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

@chuyik

This comment has been minimized.

Copy link

commented Feb 20, 2019

Link related PR #350 to this issue.

@evilebottnawi

This comment has been minimized.

Copy link

commented Mar 15, 2019

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

@sergaunt

This comment has been minimized.

Copy link

commented Mar 16, 2019

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

@evilebottnawi

This comment has been minimized.

Copy link

commented Mar 16, 2019

@sergaunt please create minimum reproducible test repo, thanks!

@szpasztor

This comment has been minimized.

Copy link

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.

@efleurine

This comment has been minimized.

Copy link

commented Mar 22, 2019

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

@marcusstenbeck

This comment has been minimized.

Copy link

commented Mar 23, 2019

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 next@8.0.3 and @zeit/next-css@1.0.1.

@mbavio

This comment has been minimized.

Copy link

commented Mar 30, 2019

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

@Aid19801

This comment has been minimized.

Copy link

commented Apr 5, 2019

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

@sanzhardanybayev

This comment has been minimized.

Copy link

commented Apr 11, 2019

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

@sanzhardanybayev

This comment has been minimized.

Copy link

commented Apr 11, 2019

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

@evilebottnawi

This comment has been minimized.

Copy link

commented Apr 11, 2019

npm cache

@sanzhardanybayev

This comment has been minimized.

Copy link

commented Apr 11, 2019

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

Tyncture added a commit to Tyncture/eyetinerary that referenced this issue Jul 23, 2019

Tyncture added a commit to Tyncture/eyetinerary that referenced this issue Jul 23, 2019

Tyncture added a commit to Tyncture/eyetinerary that referenced this issue Jul 23, 2019

@jnv

This comment has been minimized.

Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.