0

I am trying to load a json dynamically based on a string variable, however, when I try to use even the most basic variable that contains a string, I get an error, whereas when I use the string it works just fine

const configLoader = async () => {
    const pathVariable = './file.json';
    const fileName = 'file';

    const configFile = await import('./file.json'); // Works!
    const configFile = await import(pathVariable); // Doesn't work!
    const configFile = await import(`./${fileName}.json`); // Doesn't work!
}

The error

Invalid call at line 34: import(pathVariable)
Onyx
  • 5,186
  • 8
  • 39
  • 86
  • _"I get an error"_ - it's helpful to include the error itself as part of a [mre]. I believe static and dynamic imports are required to be fixed strings so they can be analysed statically (e.g. per [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) _"Only single quoted and double quoted Strings are allowed"_ for the module name). – jonrsharpe May 05 '22 at 14:51
  • @jonrsharpe I'm kinda confused now, what is dynamic about this import if I can't actually pass a variable string based on some computation that I make? – Onyx May 05 '22 at 14:53
  • @jonrsharpe Sorry I forgot to add the error. – Onyx May 05 '22 at 14:54
  • Under https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports it does say you might use this _"When the import specifier string needs to be constructed dynamically."_ What's actually throwing that error - is it a bundler like Webpack that needs to resolve all of the relevant files at bundling time rather than runtime? Related: https://stackoverflow.com/q/60562457/3001761, https://stackoverflow.com/q/59341858/3001761. – jonrsharpe May 05 '22 at 14:55

1 Answers1

1

You are using a tool, such as WebPack, which resolves imports at build-time.

It require that you pass string literals since the value of variables generally can't be known until run-time.

See WebPack's documentation:

Dynamic expressions in import()

It is not possible to use a fully dynamic import statement, such as import(foo). Because foo could potentially be any path to any file in your system or project.

The import() must contain at least some information about where the module is located. Bundling can be limited to a specific directory or set of files so that when you are using a dynamic expression - every module that could potentially be requested on an import() call is included. For example, import(./locale/${language}.json`) will cause every .json file in the ./locale directory to be bundled into the new chunk. At run time, when the variable language has been computed, any file like english.json or german.json will be available for consumption.

// imagine we had a method to get language from cookies or other storage
const language = detectVisitorLanguage();
import(`./locale/${language}.json`).then((module) => {
  // do something with the translations
});
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Would the example you've given work? I tried doing the same thing but got the same error. Anything that is not a string just gives me error. – Onyx May 05 '22 at 15:06
  • @Bobimaru — I'm just quoting the documentation. I can't see your attempt at following it and I don't know what error message you received. – Quentin May 05 '22 at 15:18
  • I tried const configFile = await import(`./${fileName}.json`); and got the same error - Invalid call at line 31: import("./" + fileName + ".json") – Onyx May 05 '22 at 15:25