Webpack-encore: ValidationError: CSS Loader Invalid Options

[mu4ddi3]

Recently i decided to upgrade my frontend dependencies to use your great Webpack 4 .

No extraordinary plugins was enabled. It was just Vue loader and sass Loader in webpack config.

Then i started recieved this kind of error:

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 Optionsoptions should NOT have additional properties

I debug things a little bit and discovered that it is because something initialize option for css-loader like this: { minimize: false, sourceMap: true, importLoaders: 0 }. Unfortunatelly form version 1.0.0 of css-loader there is a BC touching this: minimize option was removed.

The problem occurs with newest css-loader (2.1.0) onboard. (I thought i need to install it like i did before)
I tried everything without luck. After a while I decided to remove this package from my packages.json and rely on version from webpack dependency (1.0.1) and not obviously things started to work.

So i know now that i cant upgrade it for now, but is there a plan for future to support newest css-loader? Another question is how to get info about what plugin or where exaclty is this options injection so maybe it can be patched there?

webpack.config.js


// webpack.config.js
var Encore = require('@symfony/webpack-encore');

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')

    .addEntry('app', './assets/js/app.js')
    .addEntry('base', './assets/js/base.js')

    .enableSingleRuntimeChunk()
    .splitEntryChunks()

    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())

    .enableVersioning(Encore.isProduction())

    .configureBabel(function(babelConfig) {
        babelConfig.plugins = [
            "@babel/transform-runtime",
            "@babel/transform-async-to-generator"
        ]
    })

    .enableSassLoader()
    .enableVueLoader()
;

module.exports = Encore.getWebpackConfig();

[Lyrkan]

Hi @mu4ddi3,

The problem occurs with newest css-loader (2.1.0) onboard. (I thought i need to install it like i did before)
I tried everything without luck. After a while I decided to remove this package from my packages.json and rely on version from webpack dependency (1.0.1) and not obviously things started to work.

Yeah, you don't need to (and probably shouldn't) add packages that are already a direct dependency of Encore.

So i know now that i cant upgrade it for now, but is there a plan for future to support newest css-loader?

I don't think anyone has looked into updating it for now but yes, we'll probably have to do it.

Another question is how to get info about what plugin or where exaclty is this options injection so maybe it can be patched there?

There you go: https://github.com/symfony/webpack-encore/blob/70f47f6795af73e66362080f4668e00b1e048df0/lib/loaders/css.js#L23-L38

Note that you can change the options given to the loader by calling Encore.configureCssLoader.

[mu4ddi3]

Yeah, you don't need to (and probably shouldn't) add packages that are already a direct dependency of Encore.

Yeah it was my incorrect way of solving "warning peer dependency issues".

Now i know i should not do it. Thank you For clearification.

[sebastianjung]

@mu4ddi3 downgrading to 1.0.1 for css-loader actually fixed the same problem i had with laravel-mix and vue compilation errors. Thanks!

[realtebo]

@sebastianjung : we have the same problem, on Windows, with Laravel 5.8 + VueJs 2 (latest).

How can we downgrade ? css-loader is not a direct dev-dependency

[OlegZavrazhin]

"@symfony/webpack-encore": "^0.27.0" - the error is still reproducing.
When is it gonna be working with "css-loader": "^3.0.0"?
Versions below have some vulnerabilities(

[Lyrkan]

Hi @OlegZavrazhin,

"@symfony/webpack-encore": "^0.27.0" - the error is still reproducing.

Unless you use options that are not in css-loader@2 or add css-loader@3 to your project (which is something you shouldn't do) it should work fine.

When is it gonna be working with "css-loader": "^3.0.0"?

css-loader@3 was released 10 days ago and is a major version... so we'd have to look if everything still work as expected before updating it.

Versions below have some vulnerabilities

Which vulnerabilities are you talking about?

$ yarn add css-loader@^2
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved 34 new dependencies.
info Direct dependencies
└─ [email protected]

$ yarn audit
yarn audit v1.16.0
0 vulnerabilities found - Packages audited: 99
Done in 0.83s.