TypeError: IntlMessageFormat is not a constructor

[andreareginato]

Hi everyone.

In a project we are using IntlMessageFormat in order to create localized messages into an HTML page. In the setup we are using for developing everything works perfectly (locally), but the following error happens in the dev environment on Google Cloud.

TypeError: IntlMessageFormat is not a constructor at t (file:///usr/src/app/dist/server/assets/html.page.2e13d2b5.js:512:19) at value (file:///usr/src/app/dist/server/assets/html.page.2e13d2b5.js:97:26) at Tx (file:///usr/src/app/dist/server/assets/html.page.2e13d2b5.js:106:25) at Fb (/usr/src/app/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:65:44) at ...

Here an extract of the code that uses IntlMessageFormat

export function mfmt(variables: Record<string, string | number>) {
  const t: TxTransformer = (rawValueString, meta) => {
    try {
      const msg = new IntlMessageFormat(cleanHtml(rawValueString), 'it-IT');
      const result = z.string().safeParse(msg.format(variables));
      if (result.success) {
        return result.data;
      } else {
        console.error(
          'unexpected message format result',
          JSON.stringify(result),
        );
        return rawValueString;
      }
    } catch (e) {
      console.log(`error in '${String(meta.key)}'`);
      console.error(e);
      return rawValueString;
    }
  };
  return t;
}

We've tried different paths to solve the issue

1. Add polyfill https://polyfill.io/v3/polyfill.min.js?features=Intl

Unluckily the approach did not work. At the moment we are running of ideas and it would be of great help any hint or possible direction, as the searchers we made based on the shared error message, did not lead to many possible directions.

Thanks a lot for your time,
Andrea

[andreareginato]

Solved with a proper import.

Was
import IntlMessageFormat from 'intl-messageformat';
Fixed in
import { IntlMessageFormat } from 'intl-messageformat';