Problem with dynamic import

[mattp0123]

I am using the dynamic import to import my translation json file.
I got the error in the chrome console:

Failed to load module script: The server responded with a non-JavaScript MIME type of "application/json". Strict MIME type checking is enforced for module scripts per HTML spec.

This is my code:

const langCode = navigator.language;
const translationsModule = await import(`../locales/${langCode}.json`);
console.log(translationsModule.default);

[melissamcewen]

Hi @matt-peng-0123 do you have a repo we could take a look at? Thanks!

[mattp0123]

Hi @melissamcewen. Thank you for your reply.
Here's the repo

[FredKSchott]

Normally this would be fine if the imported file was JS, but import() on a JSON file will actually fail in the browser. We convert JSON imports to JS imports normally.

Unfortunately, Snowpack is only able to transform dynamic imports with exact strings (await import(../locales/en.json); and cannot transform complex string templates or expressions. This is a limitation that's hard to solve for (but not impossible!). I'll create an issue to track, since I don't think we have one yet.

[N8-B]

We have similar logic in our application. We deal with the dynamic loading of locales based on the active language using the following approach.

const getTranslationsModule = async langCode => {
  const translationsModules = {
    en: () => import(`../locales/en.json`),
    es: () => import(`../locales/es.json`)
    // ... the rest of your supported languages
  };

  return translationsModules[langCode]();
};

const langCode = navigator.language;
const translationsModule = await getTranslationsModule(langCode);