ES Dynamic Imports, ChunkLoadError on Safari

Question

I'm working on a small tester to ensure all versions of the app work well with dynamic imports. I've created a basic example downloading a number variable

import(/* webpackMode: "lazy-once", webpackChunkName: "dynamic-var" */ './dynamicVar').then(({TEST_NUMBER}) => {
    console.log(`the number is ${TEST_NUMBER}`);
});

Running the code causes a new js file to pop into my sources, and the variable does import as should.

The problem is, this configuration does not work for me as should, as I get reports of chunkLoadError pointing to that imported js file, on a few devices, mostly with from the Safari browser.

The chunk error originates within a webpack (or) babel script placing the dynamically imported value into a tag. This seems to be some sort of a polyfill, but I'm not sure since the same function is called even if I set the browserslist to just the last two chrome versions.

Here's the code from WP/Babel which fires the error

var promise = new Promise(function(resolve, reject) {
    installedChunkData = installedChunks[chunkId] = [resolve, reject];
});
promises.push(installedChunkData[2] = promise);

// start chunk loading
var script = document.createElement('script');
var onScriptComplete;

script.charset = 'utf-8';
script.timeout = 120;
if (__webpack_require__.nc) {
    script.setAttribute('nonce', __webpack_require__.nc);
}
script.src = jsonpScriptSrc(chunkId);

// create error before stack unwound to get useful stacktrace later
var error = new Error();
onScriptComplete = function(event) {
    // avoid mem leaks in IE.
    script.onerror = script.onload = null;
    clearTimeout(timeout);
    var chunk = installedChunks[chunkId];
    if (chunk !== 0) {
        if (chunk) {
            var errorType = event && (event.type === 'load' ? 'missing' : event.type);
            var realSrc = event && event.target && event.target.src;
            error.message = 'Loading chunk ' + chunkId + ' failed.
(' + errorType + ': ' + realSrc + ')';
            error.name = 'ChunkLoadError';
            error.type = errorType;
            error.request = realSrc;
            chunk[1](error);
        }
        installedChunks[chunkId] = undefined;
    }
};
var timeout = setTimeout(function() {
    onScriptComplete({type: 'timeout', target: script});
}, 120000);
script.onerror = script.onload = onScriptComplete;
document.head.appendChild(script);

I've tried poking around the net for the possible solution to this error, but for the life of me I can't seem to find anything particular.

Is anyone around familiar with the issue, and is there any way this could be handled?

ES Dynamic Imports, ChunkLoadError on Safari

0 Answers