Transform issue with babel-plugin-formatjs and tsdx

[danielstreit]

I'd like to add translations to my library using react-intl. There is an associated babel plugin, babel-plugin-formatjs, that transforms and compiles the messages to be translated.

To Reproduce

Git Repro URL

https://github.com/danielstreit/tsdx-formatjs-repro

Reproducible Steps/Repo

Steps to reproduce the behavior:

1. Bootstrap tsdx project: npx tsdx create mylib
2. Run yarn add react-intl babel-plugin-formatjs
3. Add babelrc with babel-plugin-formatjs
4. Add messages to the code
5. Run yarn build

Expected behavior

Messages in the build output should:

• Include an id
• defaultMessages should be compiled
• description should be omitted

See build output here: https://github.com/danielstreit/tsdx-formatjs-repro/blob/main/dist/testintl.esm.js.

• intl.formatMessage is transformed as expected
• FormattedMessage is not transformed at all

Suggested solution(s)

I'm not sure. I'm having trouble determining the root cause. Any help in identifying or debugging it would be greatly appreciated

Your environment

  System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 449.11 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.16.2 - ~/.nvm/versions/node/v12.16.2/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v12.16.2/bin/npm
  Browsers:
    Chrome: 90.0.4430.93
    Safari: 14.0.3
  npmPackages:
    tsdx: ^0.14.1 => 0.14.1 
    typescript: ^4.2.4 => 4.2.4

[sgalcheung]

I encountered similar problem

tsdx-formatjs-repro/example/index.tsx: Invalid Version: undefined

see the issue resolve this.

and the big problem occurs.

$ tsdx build
@rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to true, as the next major version will default
🚨 /Users/.../tsdx-formatjs-repro/dist/testintl.esm.js: /Users/.../tsdx-formatjs-repro/dist/testintl.esm.js: message.trim is not a function