Dynamic import of locale data from react-intl

help
1

Hello,

I have this function:

function loadLocale(locale) {
  switch (locale) {
    case 'de':
      return import('react-intl/locale-data/de');
    case 'pl':
      return import('react-intl/locale-data/pl');
    default:
      return import('react-intl/locale-data/en');
  };  
}

Later I do this on the client:

import { addLocaleData } from 'react-intl';

loadLocale('de').then(localeData => {
    addLocaleData(localeData.default);
}

Locally everything works as expected… Unfortunately I get this error, after a deployment:

Uncaught (in promise) Error: Cannot find module '/node_modules/react-intl/locale-data/de.js'

Why do I receive this error?

Best regards,

HK

2

I found the issue. The environment variable ROOT_URL needs to be set properly. Since I deployed the app to a test environment, the url is not the same as the one from my production environment.

1 Like