Currently, I am in the process of developing an application utilizing the Quasar framework with Typescript. Managing a large number of JSON files for dynamic import has proven to be quite challenging due to the impracticality of manually importing hundreds of files.
In order to load the JSON data in my Vue component, I have a scripts file set up. However, I encountered an issue when trying to dynamically import a file using a variable filename, possibly because the webpack is not including that specific file.
When manually typing out the filename as a dynamic import, it works smoothly:
import('src/assets/myData.json').then(myData => console.log(myData))
On the other hand, trying to build the filename using a variable string does not work:
const fileName = 'myData';
import(`src/assets/${fileName}.json`).then((myData) => console.log(myData));
This approach triggers an error message in the browser console:
Uncaught (in promise) TypeError: Failed to resolve module specifier 'src/assets/myData.json'
It seems like the webpack does not include the myData.json file due to the string interpolation technique used. The second example does not display the file in the dev tools browser, whereas it appears in the first example. Is there a way to incorporate these data files without manual input? Given the abundance of such files, manual insertion is not a feasible solution. Any insights or suggestions would be greatly appreciated. Thank you!