3.1.0 breaks IE 11

[davidspiess]

The 3.1.0 update breaks IE 11 with: "Const must be initialized error" I think the main culprit is the use of const in for of loops, which is not supported in IE11 https://github.com/blakeembrey/free-style/blob/master/src/index.ts#L257

Any chance to see this fixed?

[blakeembrey]

This is more likely the entire 3.1.0 build: https://github.com/blakeembrey/free-style/releases/tag/v3.1.0. Let me see what I can do so we have both benefits.

[blakeembrey]

So support IE11 changes the package from 1.64 KB to 1.96 KB, which isn't really an acceptable tradeoff in this case. I believe most of this weight comes from classes being down leveled, which probably isn't supported by IE11 either.

[blakeembrey]

@davidspiess Have you considered something like https://developer.epages.com/blog/coding/how-to-transpile-node-modules-with-babel-and-webpack-in-a-monorepo/? How are you dealing with other dependencies?

[blakeembrey]

Another alternative I've found is that I could distribute an ES5 version of the package and reference to it via package.json, and you could change Webpack to find it automatically (documentation here: https://webpack.js.org/configuration/resolve/#resolvemainfields). Unfortunately this wouldn't be automatic and would require some configuration.

[davidspiess]

This is more likely the entire 3.1.0 build

Ah, yes, i was only concerned by the error message, but probably you are right. There will be much more not working anymore.

How are you dealing with other dependencies?

It comes down to each dependency. Like you said, there are packages with a dedicated ES5 version (like https://react-hook-form.com/faqs#BrowserSupport), others suggest to install a specific ES5 compatible version (like https://github.com/sindresorhus/query-string). Right now i only use TypeScript, Webpack and necessary Polyfills to create my bundle.

"compilerOptions": {
  "module": "esnext",
  "moduleResolution": "node",
  "target": "es5",
  "lib": ["es6", "dom"],
  ....
}

[blakeembrey]

The React Hook Form example is informative, thanks! Would you mind if this package does that as well?

[davidspiess]

This would be greatly appreciated! Thanks! 😊

[blakeembrey]

I've published a patch with the ES5 version available from free-style/dist.es5, let me know if that works! I also updated the legacy browser note in the README to reflect this. For typestyle, I'll leave the ES5 implementation up to them, but you may need to update your Webpack configuration to find the new dist.es5 over the regular dist directory.

[davidspiess]

Thank you for your quick support and effort 🎉