When building multilingual applications, it’s essential to serve the correct translations based on the user’s preferred language. In JavaScript, you can dynamically import modules to load the appropriate language file based on the user’s language preference.

Using the import() function

The import() function, also known as dynamic import, allows you to asynchronously import modules in JavaScript. This feature was introduced in ECMAScript 2018 and is well-supported in modern browsers.

To dynamically import a module based on the user’s preferred language, you can follow these steps:

1. Determine the user’s preferred language using the navigator.language property. This property returns a string representing the language tag of the browser’s user interface.

2. Construct the URL of the module based on the user’s language. For example, if you have separate language files for English (en.js) and Spanish (es.js), you can construct the URL as follows:

   • English: /translations/en.js
   • Spanish: /translations/es.js

3. Use the import() function to dynamically import the module based on the constructed URL. The import() function returns a promise that resolves to the exported module.

   const language = navigator.language.split('-')[0]; // Get the language code
   const url = `/translations/${language}.js`;
   
   import(url)
     .then((module) => {
       // Use the exported module here
     })
     .catch((error) => {
       console.error('Failed to dynamically import module:', error);
     });
   

   The catch block handles any errors that may occur during the dynamic import, such as if the module for the user’s preferred language does not exist.

Preparing Language Modules

To make use of dynamic imports, you need to prepare language modules that export the necessary translations. Each module should export an object containing the translations relevant to the language.

For example, a language module en.js for English could look like this:

export default {
  greeting: 'Hello',
  goodbye: 'Goodbye',
  // ... other translations
};

Similarly, a language module es.js for Spanish could look like this:

export default {
  greeting: 'Hola',
  goodbye: 'Adiós',
  // ... other translations
};

Conclusion

By dynamically importing modules based on the user’s preferred language, you can serve the correct translations in your JavaScript applications. The import() function provides a convenient way to load the appropriate language module asynchronously. Remember to prepare language modules that export the necessary translations for each supported language.

References

• MDN web docs: Dynamic import
• MDN web docs: navigator.language