I have a Webpack configuration set up:
module.exports = {
mode: isProduction ? 'production' : 'development',
context: path.resolve(__dirname, 'src'),
entry: {
main: './index.jsx'
},
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/',
filename: ({ chunk: { name } }) => {
return name === 'main' ? 'bundle.min.js' : '[name].js'
}
},
optimization: {
runtimeChunk: {
name: 'vendors'
},
splitChunks: {
chunks: 'all',
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
reuseExistingChunk: true
}
}
}
},
...
So running npm run build creates a few files in the dist folder:
bundle.min.js: app codebundle.min.css: CSSvendors.js: node modules
Then, in the HTML template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="referrer" content="no-referrer"/>
<script defer="defer" src=vendors.js></script>
<link rel="stylesheet" type="text/css" href="bundle.min.css?ts={{timestamp}}">
</head>
<body>
<div id="app"></div>
<script src="bundle.min.js?ts={{timestamp}}"></script>
</body>
</html>
This worked well. But one day, after deploying a new build, nothing showed up on the UI and I got this error message in the browser console:
TypeError: undefined is not an object (evaluating 't[e].call')
r: unsupportedIterableToArray.js:8
4197: bundle.min.js:272941
r: unsupportedIterableToArray.js:8
(anonymous function) - index.less:2
t: node module decorator:4
t
forEach
(anonymous function) - jsonp chunk loading:34
(anonymous function) - jsonp chunk loading:39
Global code - jsonp chunk loading:39
Refreshing the page didn't help. But if I clear the browser cache, the page loads correctly.
What could be going on here? Why did clearing the browser cache resolve the problem?
I'm not able to reproduce the issue, but I just want to understand why in case this happened again in future.
Note: I did not upgrade any dependencies so vendors.js should not have changed. But I updated the application code...