How to reload a dynamically loaded ES6 module (using import() as a function) without reloading the whole page?

Question

The following code will always log the same message even if the module has changed on the server, regardless of Cache-Control headers sent:

import('http://example.com/script.mjs').then(m => console.log(m.default))

unless the whole page is reloaded. Is there a programmatic way to bust the dynamic import cache, similar to delete require.cache[...] in NodeJS?

Answer 1

You can add a random querystring to the URL to avoid it being cached. It would make sense to have an API endpoint at your server that would get the timestamp of the last change of the script. So you could send a request to this API endpoint and if the timestamp turns out to be newer than the latest load of the file, then you could add a random querystring and import it.