Unexpected output of url includes `file://` protocol

[Fi2zz]

• Operating System: MacOS 11.4
• Node Version: 16.3.0
• NPM Version: 7.15.1
• webpack Version: 5.41.1
• css-loader Version: 6.2.0

Using default options of css-loader

transform background-image: url(../img/foo/bar.jpg) supposed to be background-image: url(/img/foo/bar.jpg)

but go background-image: url(file:///img/foo/bar.jpg),
please see the code below

the original css code

.Banner {
    height: 240px;
    background-image: **url(../assets/img/banner.jpg)**;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 35px;
}

Expected Behavior

.Home_Banner__3Z7xi {
  height: 240px;
  background-image: **url(/33e75dae657057c9451f.jpg)**;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
  position: relative;
  margin-bottom: 35px;
}

Actual Behavior

.Home_Banner__3Z7xi {
  height: 240px;
  background-image: **url(file:///33e75dae657057c9451f.jpg)**;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
  position: relative;
  margin-bottom: 35px;
}

Code

// webpack.config.js

{
  test: /\.css$/,
 loader:require.resolve('css-loader')
}

[Fi2zz]

problem solved by simply set options.esModule to false

[alexander-akait]

What is target? Which loader do you use too? options.esModule to false is dirty workaround

[cbazureau]

I've got the same issue (target web).

For me there are strange changes on snapshots like here : 7ec5831#diff-667e298268e5db9f9f30c5a0b51b917e019a229d5ec4291f8435af819f4a64d7R276 (@cap-Bernardito / @alexander-akait)

In my case :

• I've set an alias on assets: path.resolve(appRootPath, './src/assets/'),
• I was previously using file-loader with a url('~assets/xxx/yyy.woff') syntax.
• Now i've switched to type:assets/resource and the last css-loader version. i've tried
  • url('~assets/xxx/yyy.woff')
  • url('assets/xxx/yyy.woff')
  • url('/assets/xxx/yyy.woff')
  • url('../assets/xxx/yyy.woff') (relative path)

and i always get url('file://<my-output.path><filename-base-on-generator.filename') (for example file://client/yyy-1243523235.woff) instead of url('/<my-output.path><filename-base-on-generator.filename') (for example /client/yyy-1243523235.woff) like before

Edit : I need to update my https://github.com/webpack-contrib/mini-css-extract-plugin plugin. I'm trying this tomorrow and i'm telling you if it was the problem

[alexander-akait]

Yes, we describe it, with css-loader v6 you need v2 (ideally the latest version) of mini-css-extract-plugin

[cbazureau]

Yes it was that, i'm using a fork (webpack-contrib/mini-css-extract-plugin#711) so i didn't seen it first.

[alexander-akait]

Why do you use fork?

[cbazureau]

I've got a specific component in charge of loading async component (aka loading associated js/css/rtl-css in parallel) based on data collected by assets-webpack-plugin.
Like discuss here webpack-contrib/mini-css-extract-plugin#711. In my fork, i'm just removing some code from https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/src/index.js#L523 to https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/src/index.js#L817

• i need the extraction provided by mini-css-extract-plugin (to get my .css files)
• I'm using assets-webpack-plugin to get a json formated list of all assets grouped (js/css/rtl-css) by chunkname
• my custom asyncCompoment can load onDemand component based on chunkname and the json generated previously
• i know that it's "unsafe, because order can be wrong" (like you've said) but i've mitigated it using strict BEM declarations

[alexander-akait]

Can you provide small example (need to check)? I think I know how you can solve this in a more correct direction.

[Fi2zz]

workaround

I used the web target
After review ‘css-loader’ source code
It worked by simply set ‘options.esModule=false’

[alexander-akait]

@Fi2zz update mini-css-extract-plugin

[Fi2zz]

@Fi2zz update mini-css-extract-plugin

it generate file:// protocol before the plugin

[Fi2zz]

@Fi2zz update mini-css-extract-plugin

Anyway, thank for help

[alexander-akait]

@Fi2zz run npm ls mini-css-extract-plugin