css-loader: ValidationError: Invalid options object (options.url)

Operating System: Windows 10 21H1
Node Version: 16.4.2
NPM Version: 7.18.1
webpack Version: 5.45.1
css-loader Version: 6.0.0

Actual Behavior

For almost a half year, everything worked fine running npm run prod in my Laravel application but for an unknown reason, it throws an error since today. I have absolutely no clue what I’ve done, but I can’t get it back to work:

ERROR in ./resources/sass/app.scss
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: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
 - options.url should be one of these:
   boolean | object { filter? }
   -> Allows to enables/disables `url()`/`image-set()` functions handling (https://github.com/webpack-contrib/css-loader#url).
   Details:
    * options.url should be a boolean.
    * options.url should be an object:
      object { filter? }
    at validate (D:\...\node_modules\webpack\node_modules\schema-utils\dist\validate.js:105:11)
    at Object.getOptions (D:\...\node_modules\webpack\lib\NormalModule.js:527:19)
    at Object.loader (D:\...\node_modules\css-loader\dist\index.js:31:27)
    at processResult (D:\...\node_modules\webpack\lib\NormalModule.js:701:19)
    at D:\...\node_modules\webpack\lib\NormalModule.js:807:5
    at D:\...\node_modules\loader-runner\lib\LoaderRunner.js:399:11
    at D:\...\node_modules\loader-runner\lib\LoaderRunner.js:251:18

Before I got this error, it throwed another one which I fixed by myself that. It said, it couldn’t find Module ‘css-loader’. So I ran npm install --save-dev css-loader (or something similar) and the new error appeared. Bbut I never used css-loader it before, so why i it required now?!

Nevermind, how do I fix the ValidationError error above?

Code

webpack.config.js https://gist.github.com/Pinnokkio/240d6f2f2e31df9cc48c7fe1a1496ae4

Unfortunately, this error stops me from further development right now because my .css-files are missing and I can’t recreate them. I really appreciate your support, thank you very much!

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 3
Comments: 15 (7 by maintainers)

Most upvoted comments

Hello ! I have the same error and I don’t use url function anymore… @Pinnokkio Have you solved it ?

Well, I found a quick fix but I‘m not really happy with it yet.

I am using sass-loader which requires css-loader in it‘s dependencies. For some reason, it updated css-loader to it‘s latest version 6.0.0 (at this time) which seems to be incompatible.

I just added the latest 5.x of css-loader (to „overwrite“ the dependencies of sass-loader) to my own package.json and it seem to work.

I hope I‘m not telling something wrong, but I could take a look later after work on it if still required. But you could give it a try to „downgrade“ css-loader to it‘s latest 5.x.

Pinnokkio on Jul 20, 2021

You should change “css-loader?url=false” to:

{
  loader: 'css-loader',
  url: false
}

But I don’t recommend to disable url() resolving, if you want to keep some url(), please use:

{
  loader: 'css-loader',
  url: { filter: () => {/* Logic */ } }
}

or as you write above /* webpackIgnore: false */

alexander-akait on Aug 16, 2021

Hello ! I have the same error and I don’t use url function anymore… @Pinnokkio Have you solved it ?

Well, I found a quick fix but I‘m not really happy with it yet.

I am using sass-loader which requires css-loader in it‘s dependencies. For some reason, it updated css-loader to it‘s latest version 6.0.0 (at this time) which seems to be incompatible.

I just added the latest 5.x of css-loader (to „overwrite“ the dependencies of sass-loader) to my own package.json and it seem to work.

I hope I‘m not telling something wrong, but I could take a look later after work on it if still required. But you could give it a try to „downgrade“ css-loader to it‘s latest 5.x.

Thank you ! I have tried it and it works for me too. I’ll use this solution temporarily to avoid blocking production, but when the time comes I’ll see if other solutions have been found (apart from your post, I haven’t found anything on the internet mentioning exactly the same error, it must still be recent).

0xARROWK on Jul 20, 2021

Ah right, okay. thanks for the example outputs, I will check it out. Much appreciated

krystyna93 on Aug 16, 2021

Hello ! I have the same error and I don’t use url function anymore… @Pinnokkio Have you solved it ?

0xARROWK on Jul 20, 2021