I'm getting a strange error from webpack in my prod environment in the following line only on FF. I've tried Chrome, Safari and there are no issues.
function __webpack_require__(moduleId) {
...
// Execute the module function
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
}
If I break on that line and reload the page the issue does not happen which leads me to think it some kind of race condition on a file which is loaded.
I have 4 webpack output files in the following order.
<script type="text/javascript" src="/manifest-4.e05278c43f895122ca44.js" async=""></script>
<script type="text/javascript" src="/vendor-2.e05278c43f895122ca44.js" async=""></script>
<script type="text/javascript" src="/main-0.e05278c43f895122ca44.js" async=""></script>
<script type="text/javascript" src="/bootstrap-3.e05278c43f895122ca44.js" async=""></script>
I've looked at Github & SO for similar issues but don't think they directly relate to my issue.
[UPDATE]
Debugged the exact moduleId to be 49. Contents of main bundle file is empty for the 49th module which means it must be in vendor bundle. Suspect the loading speed of main and vendor bundle might be causing some issues.
Figured out the answer myself.
As suspected this was because vendor bundle loading after main bundle. Even though vendor bundle is specified before main there are couple of reasons causing this.
async attribute might cause race conditions when fetching the bundleasync we were also preloading the main bundle We removed both as we did not have any use for them.