Skip to content

formatjs: defaultMessage does not handle statically evaluate-able variables #564

@cuyl

Description

@cuyl

Describe the bug

formatjs leaves empty when there is a variable in the defaultMessage

Example Input:

import { FormattedMessage, defineMessage, formatMessage } from "react-intl";

const hello = "Hello, ";
const world = "world!";

const helloWorldWithVariableConcatenation = defineMessage({
  defaultMessage: hello + world,
});
console.log(
  formatMessage(helloWorldWithVariableConcatenation),
);

function HelloWorldComponent() {
  return (
    <>
      <FormattedMessage defaultMessage={`${hello}${world}`} />
      <FormattedMessage defaultMessage={hello + world} />
    </>
  );
}

export default HelloWorldComponent;

Current Output:

import { FormattedMessage, defineMessage, formatMessage } from "react-intl";
const hello = "Hello, ";
const world = "world!";
const helloWorldWithVariableConcatenation = defineMessage({
    id: "FZQkTV",
    defaultMessage: [
        {
            "type": 0,
            "value": "helloworld"
        }
    ]
});
console.log(formatMessage(helloWorldWithVariableConcatenation));
function HelloWorldComponent() {
    return React.createElement(React.Fragment, null, React.createElement(FormattedMessage, {
        defaultMessage: []
    }), React.createElement(FormattedMessage, {
        id: "FZQkTV",
        defaultMessage: [
            {
                "type": 0,
                "value": "helloworld"
            }
        ]
    }));
}
export default HelloWorldComponent;

Expected Output:

import { FormattedMessage, defineMessage, formatMessage } from "react-intl";
const hello = "Hello, ";
const world = "world!";
const helloWorldWithVariableConcatenation = defineMessage({
    id: "wVJ82J",
    defaultMessage: [
        {
            "type": 0,
            "value": "Hello, world!"
        }
    ]
});
console.log(formatMessage(helloWorldWithVariableConcatenation));
function HelloWorldComponent() {
    return React.createElement(React.Fragment, null, React.createElement(FormattedMessage, {
        id: "wVJ82J",
        defaultMessage: [
            {
                "type": 0,
                "value": "Hello, world!"
            }
        ]
    }), React.createElement(FormattedMessage, {
        id: "wVJ82J",
        defaultMessage: [
            {
                "type": 0,
                "value": "Hello, world!"
            }
        ]
    }));
}
export default HelloWorldComponent;

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions