babel-plugin-transform-react-inline-elements leads to partial message extraction

[nason]

I was using the react-optimize babel preset, and noticed that only some of our strings were being extracted.

I removed this preset, and confirmed that all our strings were extracted. Then I added each of its transforms one-by-one until I discovered that babel-plugin-transform-react-inline-elements was the root of this issue.

Unfortunately, I don't have much more information. Please let me know if there is anything I can do to help.

[ericf]

Please provide more details about the issue and can you include the simplest code that shows the issue and its compiled output?

A likely solution is to run this plugin before react-inline-elements.

[STRML]

You should only be running transform-react-inline-elements in production, not in dev, and your strings should be only generated in dev, not in production, so this shouldn't be an issue.

[ericf]

It's possible that you need to group react-optimize in its own plugin pass using the passPerPlugin: true (or whatever it is) Babel option.

[iammerrick]

Running into this issue too.

[STRML]

You may also run into this if you're using a caching babel transformer, like babel-loader.

I found that in my own project. To get around it, I ran babel via the CLI specifically targeting files I knew had translations or could have them in the future:

env NODE_ENV=intl-build babel --only ui/collections,ui/models,ui/stores,ui/utils,ui/views ui > /dev/null

[iammerrick]

even with cache off pairing babel-plugin-transform-react-inline-elements with babel-plugin-react-intl prevents react-intl from properly extracting messages for some reason.

[STRML]

See above - you shouldn't be running those in development, and you shouldn't be running babel-plugin-react-intl in production. Is there a need for you to run both in the same build?

[iammerrick]

We do only run it in production. Yes we would like to run them in the same build. Our translation happens async over CI. We are ok with translations lagging a bit across releases so we automatically push new messages on production builds which come back in the form of automated pull requests.

[iammerrick]

If react-intl is run first, I don't understand why this would be an issue to pair these two?

[iammerrick]

Also sad to see descriptions aren't removed by this plugin any more :-(

[STRML]

That's why you'd need to run passPerPlugin.

If you have development or stage branches, you should just run it there. Otherwise, you may have to just manually invoke babel outside your normal build as I mentioned above.

[iammerrick]

I can't figure out where I would use passPerPlugin, can you help me find out where to put that? Also, that is our current workaround, a separate run of babel just for messages but it feels like it shouldn't be necessary to me if the plugins are run in the right order. Could you point me in the right direction to understand why even when react-intl runs first this is still a problem?

[iammerrick]

Searching passPerPlugin babel results in this issue :-)

[STRML]

That may be a legacy (babel 5) option. I can't recall. I can't seem to find any docs on it either.

See https://babeljs.io/docs/plugins/#pluginpreset-ordering, it may help.

[iammerrick]

I read through that @STRML thank you for the link. What I don't understand is that even when react-intl is run first we still see this issue.