Template literal in argument doesn't work

Question

This returns all png files:

const files = import.meta.glob('/static/123456789/*.png')
console.log('files: ', files)

But this returns file: {}:

const dirname = import.meta.env.VITE_DIRNAME
console.log(dirname) // this outputs 123456789
const files = import.meta.glob(`/static/${dirname}/*.png`)
console.log('files: ', files)

I tried:

if (dirname === '123456789') {
    console.log('yes')
} else {
    console.log('no')
}

And it returns yes.

I also tried:

const mydir = '123456789'
const files = import.meta.glob(`/static/${mydir}/*.png`)
console.log('files: ', files)

And this returns file: {}.

How can I use variable in the argument?

Did you try doing `dirname === "123456789"`? Maybe there are blank characters — Cristian Traìna, Mar 17 '22 at 11:49
glob is very particular about whitespace, perhaps what @CristianTraìna suggested helps? — Ian Brindley, Mar 17 '22 at 11:51
"doesn't work" doesn't tell us much of anything useful. Do you get an error? Or just no matches? Or something else? — T.J. Crowder, Mar 17 '22 at 11:53

score 2 · Accepted Answer · answered Mar 17 '22 at 12:41

2

This is not possible to do, see the documentation of Vite:

| You should also be aware that glob imports do not accept variables, you need to directly pass the string pattern.

https://vitejs.dev/guide/features.html#glob-import

answered Mar 17 '22 at 12:41

Stephane Vanraes

9,579
2
9
25

Template literal in argument doesn't work

1 Answers1