For some reason webpack suddenly started building assets with invalid syntax in our pipeline. Two examples of cases when this happens:
- First case
Expected output in chunk:
...
58521: function(t, n, r) {
var e = r(15387), o = r(19220), u = r(18882), c = r(55231), i = r(84307), f = Math.max;
t.exports = function(t, n, r, a) {
... // valid function content
};
}
...
84307: function(t, n, r) {
var e = r(80006), o = r(28327);
t.exports = function(t) {
... // valid function content
};
}
Actual output:
...
58521: function(t, n, r) {
var e = r(15387), o = r(19220), u = r(18882), c = r(55231), i = r(11bc6), f = Math.max; // SyntaxError: Invalid or unexpected token
t.exports = function(t, n, r, a) {
... // valid function content
};
},
...
11bc6: function(t, n, r) { // SyntaxError: Invalid or unexpected token
var e = r(80006), o = r(28327);
t.exports = function(t) {
... // valid function content
};
}
- Case
Expected output in chunk:
DE: [
{
start: 25398,
end: 25398
},
...
{
start: 26486,
end: 26486
},
...
]
Actual output:
DE: [
{
start: 25398,
end: 25398
},
...
{
start: 436eb, // SyntaxError: Invalid or unexpected token
end: 436eb // SyntaxError: Invalid or unexpected token
},
...
]
Our webpack configuration about splitChunks is just
optimization: { splitChunks: { chunks: 'all' } } }
Does anyone know what could be causing this? What makes it extremely annoying is that this only happens randomly and only inside our CD pipeline. We haven't managed to reproduce the issue locally at all.
Thanks!