[2.0.0] URL used multiple times across imported files produces "undefined" rather than expected URL.

[Lattyware]

After upgrading to 2.0.0 from 1.0.1, I am getting url(undefined) in my output CSS where I previously got a valid URL.

This seems to happen when the URL is referenced multiple times across imported files - after the first reference undefined is output.

• Operating System: Arch Linux
• Node Version: 11.3.0
• NPM Version: 6.4.1
• webpack Version: 4.27.1
• css-loader Version: 2.0.0

Expected Behavior

The URL should be the same each time it is referenced.

Actual Behavior

undefined is output instead of the URL after the first reference.

Code

@import "./test2";

.test1 {
    background: url(../../assets/test.png);
}

.test2 {
    background: url(../../assets/test.png) repeat;
}

Produces:

With css-loader@2.0.0:

.test2{background:url(d41d8cd98f00b204e9800998ecf8427e.png) repeat}.test1{background:url(undefined)}

With css-loader@1.0.1:

.test2{background:url(d41d8cd98f00b204e9800998ecf8427e.png) repeat}.test1{background:url(d41d8cd98f00b204e9800998ecf8427e.png)}

How Do We Reproduce?

See the attached project, which works with css-loader@1.0.1 but fails with css-loader@2.0.0.

[alexander-akait]

@Lattyware thanks for issue, it is bug 👍

[alexander-akait]

Sorry not related to css-loader, problem in extract-loader, problem here https://github.com/peerigon/extract-loader/blob/master/src/extractLoader.js#L144, need rewrite logic, maybe use Object/Map (like { __EXTRACT_LOADER_PLACEHOLDER__000_000: 'asset.png' }) and get asset url based __EXTRACT_LOADER_PLACEHOLDER__000_000 index.

My recommendation is to switch on https://github.com/webpack-contrib/mini-css-extract-plugin

[james-camilleri]

I've also encountered this issue. I can see what you mean regarding the issues in extract-loader's code, but why did this only surface with css-loader 2.0.0+? Reverting to an earlier version of the css-loader plugin solves this issue.