Dynamic Import of JSON files in Typescript with variable name in Quasar/Vue

Question

I'm building a application using the Quasar framework in Typescript. I have a lot of JSON files I'd like to dynamically import, as it is not feasible to manually import hundreds of files.

I have a scripts file that is used in my Vue component to load the JSON. I am unable to dynamically import a file with a variable filename, I'm guessing because that file is not being included in the webpack.

This works, manually typing out the filename as a dynamic import:

import('src/assets/myData.json').then(myData => console.log(myData))

This doesn't work, building the filename with a variable string:

const fileName= 'myData';
import(`src/assets/${fileName}.json`).then((myData) => console.log(myData));

That results in the following error being logged in my browser:

Uncaught (in promise) TypeError: Failed to resolve module specifier 'src/assets/myData.json'

I'm guessing that the string interpolation prevents the webpack from including the myData.json file. I don't see it in the dev tools browser in the latter example, but I do see it show up in the former example. Is there a way I can include this data file without manually typing it out? I have hundreds of these types of files and doing it manually isn't really an option. Thanks in advance for any feedback.

Answer 1

I was able to solve the issue by using a relative path in the dynamic import, like so:

const fileName= 'myData';
import(`../assets/${fileName}.json`).then((myData) => console.log(myData));

I'm not exactly sure why this fixed the issue but it seems like this results in the webpack including it correctly. Will leave it up here in case it helps others.