Dist won't work in IE11 due to "target": "es6" in tsconfig.json

[jjmac]

Can tsconfig.json target es5 instead of es6? Currently when including mobx-react-lite in a CRA app the dist is built against es6 and will not run in IE11

[danielkcz]

Well, considering that IE11 is a minority, I would rather not :) It would bloat the bundle with stuff that other browsers have native implementation for. Let's add a separate build targetting ES5, should be fairly easy with Rollup. Help appreciated as I am rather swamped.

[mweststrate]

Let's make sure we export a es5 commonjs build, as that is what all toolchains will expect, and ship ES6 build as well for those tools that do support it. (It's generally not very hard to setup, especially with microbundle), I can take a stab at it later this weak.

[danielkcz]

@mweststrate You mean like make ES5 bundle the main? I am against that. It's 2019 and it's not that common anymore to consume ES5 considering that all major browsers can do most of it natively. It will only increase the bundle size for most people and some things could be even slower compare to a native implementation.

If anyone has to deal with ES5, let's have it as opt-in feature.

[danielkcz]

Source: https://kangax.github.io/compat-table/es6/

[mweststrate]

11% is pretty signficant!

But main has to be ES5 syntax. That is the unspoken agreement that keeps the web together. It is no problem to ship modern bundles as well under the appropriate fields in package.json, modern bundlers will prefer those. Note that I am talking about ES5 syntax, Using ES6 features is a different story and can be fine (they can be polyfilled). But there is a reason all popular libraries still ship ES5 as their main export :).

Also note that bundlers can't (or won't) transpile your modules down from ES6 to ES5 even if the hosting app wants to (except for Metro I think), so you are really excluding the majority of the projects by not supplying ES5 (no IE11 is not acceptable for most real production projects that are consumer facing).

Here is an excerpt from the mobx setup, to get an idea of entry points that could be defined for different targets:

"main": "lib/mobx.js",
  "umd:main": "lib/mobx.umd.js",
  "module": "lib/mobx.module.js",
  "browser": {
    "./lib/mobx.js": "./lib/mobx.js",
    "./lib/mobx.module.js": "./lib/mobx.module.js"
  },
  "unpkg": "lib/mobx.umd.min.js",
  "jsnext:main": "lib/mobx.module.js",
  "react-native": "lib/mobx.module.js",

[danielkcz]

What, what? How is 11% significant? Don't get confused here, those are not usage numbers, but merely how many features have that browser implemented.

Ok, I wasn't really paying attention lately to bundlers world. If it's possible to have ES5 for "old ones" and keep ES6 for "new ones", then I am ok with it.

[mweststrate]

Don't get confused here

Doh, I was. Usage seems the be slightly below 3%. But yeah, leaving this to the bundlers give the least concerns.

[alsotang]

This is a react related module. People use it in react so people always has webpack. This module should not provide any es5 build.
If someone want es5 build, just change his webpack.config. But not this project's.

[danielkcz]

@jjmac Based on my #66 (comment), can you elaborate more on what issues in IE11 you have? Also what dev stack are you using, make sure it's set up to generate ES5 code. I am almost convinced that your issues are coming from missing runtime features which you need to polyfill on your side. I do highly recommend https://polyfill.io service for that.

[jjmac]

@FredyC the specific issue is the use of arrow functions which are not transpiled to ES5. IE11 chokes on them.

I am already pollyfilling so ES6 features are not an issue. My build environment is CRA with TypeScript, and using CRACO to enable decorators. Everything works fine with mobx-react; I didn't run into any problems until trying to switch over to mobx-react-lite in order to use hooks.

[danielkcz]

@jjmac The version 1.0.1 changed target to ES5, so if you update, the IE11 should be happy again :)