Date variable in JS import file name

Question

I have small Vue app without Node.js and I import several component files.

I need to be sure that users will always get newest version of certain files/components, because I do some updates continuously.

My code is like this:

import InputComponent from './folder/editor-input.js';
import ProductComponent from './folder/editor-product.js';
..and so on

inside

<script type="module"></script>

I have tried two following ways and neither one worked.

const dateNow = Date.now(); 
import InputComponent from './moduly/editor-input.js?v='+dateNow;

and

const dateNow = Date.now(); 
import InputComponent from './moduly/editor-input.js?v={$dateNow}';

I want to have result like this: import InputComponent from './folder/editor-input.js?v=1691592140153';

Is it even possible?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import — DallogFheir, Aug 09 '23 at 14:45
Incorrect quotes for [template string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals), as well as syntax: `${...}` not `{$...}`. — tadman, Aug 09 '23 at 14:46
Not sure this is going to be useful at all, as these `import` operations are usually "packed" into your assets during a build. If you want to keep it up to date, build and deploy on a regular schedule. You'll also run into trouble if this is a local import as the filename won't have the `?v=...` stuff in it. — tadman, Aug 09 '23 at 14:48
You shouldn't need to do this manually, the build process takes care of it for you. I was pretty sure the usual Vue build process has this by default, but if not it's fairly straightforward webpack config: https://stackoverflow.com/questions/39238163/how-to-use-cache-busting-with-webpack — Daniel Beck, Aug 09 '23 at 15:04

score 3 · Answer 1 · answered Aug 09 '23 at 14:47

Static imports cannot depend on any value computed at runtime.

You'd need to use a dynamic import instead.

const dateNow = Date.now(); 
const InputComponent = await import(`./moduly/editor-input.js?v=${dateNow}`;

(Note also the corrected syntax for the template literal).

That said, using cache busting like this in a Vue app strikes me as unusual. My experience is mostly focused on React, but as far as I know they are usually built in similar ways.

Your JS files are bundled up at build time and then deployed.

The trick there is to leave your source code alone and configure your bundler to generate unique file names. e.g. with webpack you would set the output filename to include a hash.

Date variable in JS import file name

1 Answers1