Search code examples
reactjstypescriptwebpackuglifyjs

How to have Typescript target ES5 with React in Webpack?

We have a React web app written in Typescript that works fine and targets ES6 in the tsconfig.json file.

Now we want to minify it with Uglifyjs after compiling to deploy to production. That fails because Uglify supports only ES5 (even the #harmony branch, I tried that already).

So I need the webpack output to be ES5. But when I set "target": "es5" in our tsconfig file the webpack compilation fails saying: Unexpected token (164:41) You may need an appropriate loader to handle this file type.

How can we target ES5 in Typescript with React so that it works?

Attached a screenshot of the error:

enter image description here

Solution

  • The answer is, you can't.

    Babel can transpile ES7 to ES6. But it can't transpile ES6 to ES5, for that it uses a polyfill (.js library loaded in the browser).

    Thus, because you cannot get ES5 from your source code, you cannot use Uglify.

    You'll have to rely on gzipping alone (which is a substantial size decrease).