Conflict between `babel/preset-env` and `transform-template-literals`

[opyh]

While using babel/preset-env to transpile our builds for IE11, I just stumbled upon an issue:

When using babel-plugin-ttag and transform-template-literals plugins at the same time, the end result of my build still contains untranspiled template literals. transform-template-literals is necessary to get an IE11 compatible transpiled code and automatically included when using Babels preset-env plugin with ie >= 11 in the browserslist string.

I don't know if this is a bug in babel-plugin-ttag or if there is a way to correctly configure both plugins to work at the same time, I just wanted to document this in case somebody else stumbles upon a IE11 console saying SCRIPT1014: Invalid character while using this plugin. By removing babel-plugin-ttag from my .babelrc, the issue goes away and the transpiled code does not contain template literals anymore.

To keep babel-plugin-ttag and still have transpiled code, this is my workaround for now:

• Remove the plugin from the "plugins" array in our .babelrc and move it to its own Babel environment:

  {
  "plugins": [], // ← remove plugin from here
  "env": {
    "ttag": {
      "plugins": [ // ← add plugin here instead
        ["ttag", {
          "extract": {
            "output": "public/i18n/translations.pot"
          }
        }]
      ]
    }
  }
  }

• use this script package.json to create the .pot file (here as npm script in package.json):

  {
  "scripts": {
    "extract-translations": "BABEL_ENV=ttag npm run build"
  }
  }

Maybe there is a better way to achieve the same?

(PS: We're using ttag successfully to translate wheelmap.org to more than 30 languages. Thanks for your work!)