Pre-compile AST messages using create-react-app with Typescript

[javifm86]

I have a project created with create-react-app with typescript. I have been struggling with the best way to organice my messages. This is my approach:

• I have compiled messages in /messages/en.json.

{
  "a.hello": "<bold>hello</bold>",
  "a.world": "world",
  "another.another": "another <bold>message</bold>"
}

• Messages are defined in this way using defineMessages:

messages.ts

import { defineMessages } from "react-intl";

export default defineMessages({
  hello: {
    id: "a.hello",
    defaultMessage: "<bold>hello</bold>",
  },
  world: {
    id: "a.world",
    defaultMessage: "world",
  },
});

index.tsx

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { IntlProvider } from "react-intl";
import enMessages from "./messages/en.json";

interface Props {
  children?: React.ReactNode;
}

const Bold = (props: Props) => {
  return (
    <div>
      <strong>{props.children}</strong>
    </div>
  );
};

ReactDOM.render(
  <IntlProvider
    locale="en"
    defaultLocale="en"
    messages={enMessages}
    defaultRichTextElements={{
      bold: (chunks) => <Bold>{chunks}</Bold>,
    }}
  >
    <App />
  </IntlProvider>,
  document.getElementById("root")
);

• I use messages with FormattedMessage component.

App.tsx

import "./App.css";
import messages from "./messages";
import { FormattedMessage } from "react-intl";

function App() {
  return (
    <div className="App">
      <FormattedMessage {...messages.hello} />{" "}
      <FormattedMessage {...messages.world} />
    </div>
  );
}

export default App;

I am extracting and compiling messages with this npm script:

"extract-compile": "formatjs extract 'src/**/*.ts*' --ignore='**/*.d.ts' --out-file temp.json --flatten --id-interpolation-pattern '[sha512:contenthash:base64:6]' && formatjs compile 'temp.json' --out-file src/messages/en.json && rm temp.json"

The problem is that I still getting this warning in console:

message.js:50 [@formatjs/intl] "defaultRichTextElements" was specified but "message" was not pre-compiled. 
Please consider using "@formatjs/cli" to pre-compile your messages for performance.
For more details see https://formatjs.io/docs/getting-started/message-distribution

Is there anything wrong with my approach? I think the warning should disappear, but I am missing something, obviously.

I am looking at babel-plugin and ts-transformer, but I think I should extend the config in some way, because create-react-app doesn't allow it without ejecting.

Thanks for your time. Kind regards.

[jlarmstrongiv]

@javifm86 were you able to figure it out? I’m trying to do something similar

[javifm86]

From the top of my mind, the flag --ast was the solution when compiling.

I leave this blog post I wrote about the topic, for the future me struggling again with this topic 😆