Skip to content

Commit 89e943d

Browse files
xiaoxiaojxxiaoxiaojx
committed
fix: make asset modules available in JS when referenced from CSS and lazy JS
When an asset module is referenced from both CSS (via url()) and a lazy JS chunk (via lazyCompilation), the module was missing from the JS context at runtime. Root cause: NormalModule._sourceTypes was cached after first computation and never invalidated when incoming connections changed. Additionally, source types were not included in the module hash, so the code generation cache was not invalidated when types changed.
1 parent 5c43068 commit 89e943d

10 files changed

Lines changed: 126 additions & 60 deletions

File tree

‎.changeset/fix-css-lazy-asset-resource.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"webpack": patch
3+
---
4+
5+
Make asset modules available in JS context when referenced from both CSS and a lazily compiled JS chunk.

‎lib/NormalModule.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1748,6 +1748,15 @@ class NormalModule extends Module {
17481748
/** @type {string} */
17491749
(buildInfo.hash)
17501750
);
1751+
// Clear cached source types and re-compute so that changes in incoming
1752+
// connections (e.g. asset module newly referenced from JS via lazy
1753+
// compilation) are reflected in the hash and trigger code generation
1754+
// cache invalidation.
1755+
// https://github.com/webpack/webpack/issues/20800
1756+
this._sourceTypes = undefined;
1757+
for (const type of this.getSourceTypes()) {
1758+
hash.update(type);
1759+
}
17511760
/** @type {Generator} */
17521761
(this.generator).updateHash(hash, {
17531762
module: this,

‎test/configCases/css/local-ident-name/__snapshots__/ConfigCacheTest.snap‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -14,25 +14,25 @@ Object {
1414

1515
exports[`ConfigCacheTestCases css local-ident-name exported tests should have correct local ident for css export locals 2`] = `
1616
Object {
17-
"btn--info_is-disabled_1": "_15e922b2c97f47f17c54",
18-
"btn-info_is-disabled": "_15e922b2c97f47f17c54",
19-
"color-red": "--_15e922b2c97f47f17c54",
17+
"btn--info_is-disabled_1": "_0dd29f73dea88606ae8e",
18+
"btn-info_is-disabled": "_0dd29f73dea88606ae8e",
19+
"color-red": "--_0dd29f73dea88606ae8e",
2020
"foo": "bar",
21-
"foo_bar": "_15e922b2c97f47f17c54",
21+
"foo_bar": "_0dd29f73dea88606ae8e",
2222
"my-btn-info_is-disabled": "value",
23-
"simple": "_15e922b2c97f47f17c54",
23+
"simple": "_0dd29f73dea88606ae8e",
2424
}
2525
`;
2626

2727
exports[`ConfigCacheTestCases css local-ident-name exported tests should have correct local ident for css export locals 3`] = `
2828
Object {
29-
"btn--info_is-disabled_1": "_04a0a4472ff4d45a1166-btn--info_is-disabled_1",
30-
"btn-info_is-disabled": "_04a0a4472ff4d45a1166-btn-info_is-disabled",
31-
"color-red": "--_04a0a4472ff4d45a1166-color-red",
29+
"btn--info_is-disabled_1": "_26658d651495575453a9-btn--info_is-disabled_1",
30+
"btn-info_is-disabled": "_26658d651495575453a9-btn-info_is-disabled",
31+
"color-red": "--_26658d651495575453a9-color-red",
3232
"foo": "bar",
33-
"foo_bar": "_04a0a4472ff4d45a1166-foo_bar",
33+
"foo_bar": "_26658d651495575453a9-foo_bar",
3434
"my-btn-info_is-disabled": "value",
35-
"simple": "_04a0a4472ff4d45a1166-simple",
35+
"simple": "_26658d651495575453a9-simple",
3636
}
3737
`;
3838

@@ -86,13 +86,13 @@ Object {
8686

8787
exports[`ConfigCacheTestCases css local-ident-name exported tests should have correct local ident for css export locals 8`] = `
8888
Object {
89-
"btn--info_is-disabled_1": "ba1a7d6d0bb21c7b0653-btn--info_is-disabled_1",
90-
"btn-info_is-disabled": "ba1a7d6d0bb21c7b0653-btn-info_is-disabled",
91-
"color-red": "--ba1a7d6d0bb21c7b0653-color-red",
89+
"btn--info_is-disabled_1": "_78c918141017246fe472-btn--info_is-disabled_1",
90+
"btn-info_is-disabled": "_78c918141017246fe472-btn-info_is-disabled",
91+
"color-red": "--_78c918141017246fe472-color-red",
9292
"foo": "bar",
93-
"foo_bar": "ba1a7d6d0bb21c7b0653-foo_bar",
93+
"foo_bar": "_78c918141017246fe472-foo_bar",
9494
"my-btn-info_is-disabled": "value",
95-
"simple": "ba1a7d6d0bb21c7b0653-simple",
95+
"simple": "_78c918141017246fe472-simple",
9696
}
9797
`;
9898

@@ -110,25 +110,25 @@ Object {
110110

111111
exports[`ConfigCacheTestCases css local-ident-name exported tests should have correct local ident for css export locals 10`] = `
112112
Object {
113-
"btn--info_is-disabled_1": "a02ad227dd548bb84a61",
114-
"btn-info_is-disabled": "a02ad227dd548bb84a61",
115-
"color-red": "--a02ad227dd548bb84a61",
113+
"btn--info_is-disabled_1": "fd8953d7b68db99277a0",
114+
"btn-info_is-disabled": "fd8953d7b68db99277a0",
115+
"color-red": "--fd8953d7b68db99277a0",
116116
"foo": "bar",
117-
"foo_bar": "a02ad227dd548bb84a61",
117+
"foo_bar": "fd8953d7b68db99277a0",
118118
"my-btn-info_is-disabled": "value",
119-
"simple": "a02ad227dd548bb84a61",
119+
"simple": "fd8953d7b68db99277a0",
120120
}
121121
`;
122122

123123
exports[`ConfigCacheTestCases css local-ident-name exported tests should have correct local ident for css export locals 11`] = `
124124
Object {
125-
"btn--info_is-disabled_1": "_81378ae70e35838d73e5-btn--info_is-disabled_1",
126-
"btn-info_is-disabled": "_81378ae70e35838d73e5-btn-info_is-disabled",
127-
"color-red": "--_81378ae70e35838d73e5-color-red",
125+
"btn--info_is-disabled_1": "_54bf27341e3b9f7be65e-btn--info_is-disabled_1",
126+
"btn-info_is-disabled": "_54bf27341e3b9f7be65e-btn-info_is-disabled",
127+
"color-red": "--_54bf27341e3b9f7be65e-color-red",
128128
"foo": "bar",
129-
"foo_bar": "_81378ae70e35838d73e5-foo_bar",
129+
"foo_bar": "_54bf27341e3b9f7be65e-foo_bar",
130130
"my-btn-info_is-disabled": "value",
131-
"simple": "_81378ae70e35838d73e5-simple",
131+
"simple": "_54bf27341e3b9f7be65e-simple",
132132
}
133133
`;
134134

@@ -182,12 +182,12 @@ Object {
182182

183183
exports[`ConfigCacheTestCases css local-ident-name exported tests should have correct local ident for css export locals 16`] = `
184184
Object {
185-
"btn--info_is-disabled_1": "_68c15c0000bcbbd61f4d-btn--info_is-disabled_1",
186-
"btn-info_is-disabled": "_68c15c0000bcbbd61f4d-btn-info_is-disabled",
187-
"color-red": "--_68c15c0000bcbbd61f4d-color-red",
185+
"btn--info_is-disabled_1": "_31b7efe08dce677d1ef4-btn--info_is-disabled_1",
186+
"btn-info_is-disabled": "_31b7efe08dce677d1ef4-btn-info_is-disabled",
187+
"color-red": "--_31b7efe08dce677d1ef4-color-red",
188188
"foo": "bar",
189-
"foo_bar": "_68c15c0000bcbbd61f4d-foo_bar",
189+
"foo_bar": "_31b7efe08dce677d1ef4-foo_bar",
190190
"my-btn-info_is-disabled": "value",
191-
"simple": "_68c15c0000bcbbd61f4d-simple",
191+
"simple": "_31b7efe08dce677d1ef4-simple",
192192
}
193193
`;

‎test/configCases/css/local-ident-name/__snapshots__/ConfigTest.snap‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -14,25 +14,25 @@ Object {
1414

1515
exports[`ConfigTestCases css local-ident-name exported tests should have correct local ident for css export locals 2`] = `
1616
Object {
17-
"btn--info_is-disabled_1": "_15e922b2c97f47f17c54",
18-
"btn-info_is-disabled": "_15e922b2c97f47f17c54",
19-
"color-red": "--_15e922b2c97f47f17c54",
17+
"btn--info_is-disabled_1": "_0dd29f73dea88606ae8e",
18+
"btn-info_is-disabled": "_0dd29f73dea88606ae8e",
19+
"color-red": "--_0dd29f73dea88606ae8e",
2020
"foo": "bar",
21-
"foo_bar": "_15e922b2c97f47f17c54",
21+
"foo_bar": "_0dd29f73dea88606ae8e",
2222
"my-btn-info_is-disabled": "value",
23-
"simple": "_15e922b2c97f47f17c54",
23+
"simple": "_0dd29f73dea88606ae8e",
2424
}
2525
`;
2626

2727
exports[`ConfigTestCases css local-ident-name exported tests should have correct local ident for css export locals 3`] = `
2828
Object {
29-
"btn--info_is-disabled_1": "_04a0a4472ff4d45a1166-btn--info_is-disabled_1",
30-
"btn-info_is-disabled": "_04a0a4472ff4d45a1166-btn-info_is-disabled",
31-
"color-red": "--_04a0a4472ff4d45a1166-color-red",
29+
"btn--info_is-disabled_1": "_26658d651495575453a9-btn--info_is-disabled_1",
30+
"btn-info_is-disabled": "_26658d651495575453a9-btn-info_is-disabled",
31+
"color-red": "--_26658d651495575453a9-color-red",
3232
"foo": "bar",
33-
"foo_bar": "_04a0a4472ff4d45a1166-foo_bar",
33+
"foo_bar": "_26658d651495575453a9-foo_bar",
3434
"my-btn-info_is-disabled": "value",
35-
"simple": "_04a0a4472ff4d45a1166-simple",
35+
"simple": "_26658d651495575453a9-simple",
3636
}
3737
`;
3838

@@ -86,13 +86,13 @@ Object {
8686

8787
exports[`ConfigTestCases css local-ident-name exported tests should have correct local ident for css export locals 8`] = `
8888
Object {
89-
"btn--info_is-disabled_1": "ba1a7d6d0bb21c7b0653-btn--info_is-disabled_1",
90-
"btn-info_is-disabled": "ba1a7d6d0bb21c7b0653-btn-info_is-disabled",
91-
"color-red": "--ba1a7d6d0bb21c7b0653-color-red",
89+
"btn--info_is-disabled_1": "_78c918141017246fe472-btn--info_is-disabled_1",
90+
"btn-info_is-disabled": "_78c918141017246fe472-btn-info_is-disabled",
91+
"color-red": "--_78c918141017246fe472-color-red",
9292
"foo": "bar",
93-
"foo_bar": "ba1a7d6d0bb21c7b0653-foo_bar",
93+
"foo_bar": "_78c918141017246fe472-foo_bar",
9494
"my-btn-info_is-disabled": "value",
95-
"simple": "ba1a7d6d0bb21c7b0653-simple",
95+
"simple": "_78c918141017246fe472-simple",
9696
}
9797
`;
9898

@@ -110,25 +110,25 @@ Object {
110110

111111
exports[`ConfigTestCases css local-ident-name exported tests should have correct local ident for css export locals 10`] = `
112112
Object {
113-
"btn--info_is-disabled_1": "a02ad227dd548bb84a61",
114-
"btn-info_is-disabled": "a02ad227dd548bb84a61",
115-
"color-red": "--a02ad227dd548bb84a61",
113+
"btn--info_is-disabled_1": "fd8953d7b68db99277a0",
114+
"btn-info_is-disabled": "fd8953d7b68db99277a0",
115+
"color-red": "--fd8953d7b68db99277a0",
116116
"foo": "bar",
117-
"foo_bar": "a02ad227dd548bb84a61",
117+
"foo_bar": "fd8953d7b68db99277a0",
118118
"my-btn-info_is-disabled": "value",
119-
"simple": "a02ad227dd548bb84a61",
119+
"simple": "fd8953d7b68db99277a0",
120120
}
121121
`;
122122

123123
exports[`ConfigTestCases css local-ident-name exported tests should have correct local ident for css export locals 11`] = `
124124
Object {
125-
"btn--info_is-disabled_1": "_81378ae70e35838d73e5-btn--info_is-disabled_1",
126-
"btn-info_is-disabled": "_81378ae70e35838d73e5-btn-info_is-disabled",
127-
"color-red": "--_81378ae70e35838d73e5-color-red",
125+
"btn--info_is-disabled_1": "_54bf27341e3b9f7be65e-btn--info_is-disabled_1",
126+
"btn-info_is-disabled": "_54bf27341e3b9f7be65e-btn-info_is-disabled",
127+
"color-red": "--_54bf27341e3b9f7be65e-color-red",
128128
"foo": "bar",
129-
"foo_bar": "_81378ae70e35838d73e5-foo_bar",
129+
"foo_bar": "_54bf27341e3b9f7be65e-foo_bar",
130130
"my-btn-info_is-disabled": "value",
131-
"simple": "_81378ae70e35838d73e5-simple",
131+
"simple": "_54bf27341e3b9f7be65e-simple",
132132
}
133133
`;
134134

@@ -182,12 +182,12 @@ Object {
182182

183183
exports[`ConfigTestCases css local-ident-name exported tests should have correct local ident for css export locals 16`] = `
184184
Object {
185-
"btn--info_is-disabled_1": "_68c15c0000bcbbd61f4d-btn--info_is-disabled_1",
186-
"btn-info_is-disabled": "_68c15c0000bcbbd61f4d-btn-info_is-disabled",
187-
"color-red": "--_68c15c0000bcbbd61f4d-color-red",
185+
"btn--info_is-disabled_1": "_31b7efe08dce677d1ef4-btn--info_is-disabled_1",
186+
"btn-info_is-disabled": "_31b7efe08dce677d1ef4-btn-info_is-disabled",
187+
"color-red": "--_31b7efe08dce677d1ef4-color-red",
188188
"foo": "bar",
189-
"foo_bar": "_68c15c0000bcbbd61f4d-foo_bar",
189+
"foo_bar": "_31b7efe08dce677d1ef4-foo_bar",
190190
"my-btn-info_is-disabled": "value",
191-
"simple": "_68c15c0000bcbbd61f4d-simple",
191+
"simple": "_31b7efe08dce677d1ef4-simple",
192192
}
193193
`;

‎test/hotCases/css/lazy-compilation-asset/file.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
asset-content

‎test/hotCases/css/lazy-compilation-asset/index.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import "./style.css";
2+
3+
it("should make asset available in both CSS and lazy JS chunk", (done) => {
4+
const promise = import("./mod.js");
5+
NEXT_DEFERRED(
6+
require("../../update")(done, true, () => {
7+
promise.then((mod) => {
8+
expect(mod.default).toContain("file.txt");
9+
done();
10+
}, done);
11+
})
12+
);
13+
});

‎test/hotCases/css/lazy-compilation-asset/mod.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import file from "./file.txt";
2+
export default file;

‎test/hotCases/css/lazy-compilation-asset/style.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.font {
2+
src: url("./file.txt");
3+
}

‎test/hotCases/css/lazy-compilation-asset/test.filter.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
"use strict";
2+
3+
module.exports = (config) => config.target === "web";

‎test/hotCases/css/lazy-compilation-asset/webpack.config.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
"use strict";
2+
3+
/** @type {import("../../../../").Configuration} */
4+
module.exports = {
5+
mode: "development",
6+
devtool: false,
7+
output: {
8+
cssFilename: "[name].css",
9+
cssChunkFilename: "[name].css",
10+
assetModuleFilename: "assets/[name][ext]"
11+
},
12+
experiments: {
13+
css: true,
14+
lazyCompilation: {
15+
entries: false,
16+
imports: true
17+
}
18+
},
19+
module: {
20+
rules: [
21+
{
22+
test: /\.txt$/,
23+
type: "asset/resource"
24+
}
25+
]
26+
},
27+
node: {
28+
__dirname: false
29+
}
30+
};

0 commit comments

Comments
 (0)