Not recovering from failed dynamic import #278
Description
This issue arises when a dynamic import fails (in this case due to network instability). If the request does fail, the import code will never attempt to request the CSS again. Thus, we will never successfully complete the import. The code which is making that request would be something like the following:
import(
/* webpackChunkName: "AsyncBundle1", webpackMode: "lazy" */
'./AsyncBundle1'
)
.then(AsyncBundle1 => {
this.AsyncBundle1 = AsyncBundle1.default;
})
.catch((error) => {
console.log(error);
})
Sorry I could not provide a better base example, as this issue requires a server and network manipulation to achieve.
Reproduction steps:
- The bundle is requested and the network call fails.
- The CSS request Promise is rejected here, but the bundle's key in installedCssChunks is not cleared.
- We retry the request, but this line is executed, placing the rejected Promise in the promises array, not a new Promise.
- This will evaluate to Rejected every time, never even making a second service request for that CSS.
This shows that the installedCssChunks has held onto the Rejected Promise:
This shows that the CSS was never requested again, failing the Promise in the example above (Note: the blank row is a JSON request not relevant for this discussion):
This shows the Rejected Promise being pushed into the promises array for 'execution' (immediate rejection):
It is possible I have implemented this dynamic request incorrectly, but I was unable to find any solutions which fixed this issue through Webpack or this plugin specifically. Since the Javascript is being requested successfully (see above), it feels like an issue with the template code provided by this plugin.