Importing files dynamically with the new Fw7 + Vite

Questions
1

Hi, I’m trying out the new features introduced on Fw7, specifically Fw7 + Vite+ Capacitor.
I am trying to get into the logic of using static asset imports as shown here: Static Asset Handling | Vite, however, I have doubts about how to import files dynamically.

I have a pretty handy library for managing the app’s i18n, which dynamically loads a LANG.json file by making a local ajax call. However I can’t make this call to a static asset with Vite, so I’d like to use imports dynamically but I don’t think it’s possible.

This snipper is not corret in JS,

import lang from `../../../public/i18n/${languageCode}.json`;

So I’ve tried somenthing like

//Link to public directory
let test_1= new URL(`../../i18n/${language_code}.json`, import.meta.url).href;
let test_2 = import.meta.globEager(`../../i18n/*.json`);

But test_1 returns the URL, and I can’t read that file and test_2 is undefined.

What should be a good practice for importing files dynamically with Vite imports? In this case, it would be enough for me to read a specific json file, based on the value of a language variable

2

This is not a valid JS syntax, you need to use dynamic imports.

If these files are in public folder then:

import(`i18n/${languageCode}.json`).then((module) => {
  console.log(module.default);
})
3

I’ve tried this:

// It works only with relative path, if i use onle `i18n/*.json` it doesn't work
let i18n_glob = import.meta.glob('../../../public/i18n/*.json')
return await i18n_glob[`../../../public/i18n/${language_code}.json`]()

But this doens’t work either with relative path or i18n/${language_code}.json path (404 error):

 return new Promise((resolve, reject) => {
    import(`../../../public/i18n/${language_code}.json`).then((module) => {
        resolve(module.default)
    }).catch((e) => {
        reject(`Error finding "i18n/${language_code}.json"`)
     })
})
4

You somehow overcomplicating things. If these files are just JSON files, why do you do imports at all, if you can just load them via Ajax/XHR/Fetch?

fetch('path/to/jsonfile.json')...
5

Well, I was just trying to understand a bit about working with vite, as it is suggested to use imports also for static assets like images. So I just wanted to find out whether or not it is good practice to use dynamic imports for this purpose. :smile: