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!)