IE11 and other old browsers (how to make it work)
SweVictor opened this issue · 5 comments
Hi,
Just a friendly note for others who might face similar issues. For the longest time we were quite convinced observable-hooks doesn't work with IE11 since IE11 failed spectacularly without any error messages in the console whenever observable-hooks was included and used in some way (despite polyfills etc).
Turns out the issue is that the source code syntax is not ES5 compatible, meaning IE11 doesn't support it. Our webpack build excluded all node_modules from transpilation, meaning syntax was left as-is making IE11 fail on for example () => {} syntax (fat arrow functions). The kicker was that in our project this package is the only one needing transpilation, so it really took time to find the issue and the cause of it.
So: Just a friendly reminder to anyone searching for similar issues: This package needs transpilation (using babel js for example) for IE11 and other older browsers and cannot be excluded like most node_modules can.
@crimx : It would have been very helpful for us with a note about this in the documentation; at least it took us a really long time to track down! Either way hopefully someone will be helped by this issue.
Great package either way, greatly simplifies working with rxJS in React!
/Victor
Sorry for the inconvenience. I will look into this and see what I can do.
No problem, we found the issue eventually. Code-wise I don't think anything needs to be changed, just a heads up to people having similar issues.
Would you checkout the observable-hooks@alpha and see if it solve your issue? Should works without transpilation.
It does, very nice and quick fix! IE11 happy again without any special webpack configuration!
A quick double-check by hacking observable-hooks@alpha to always point to the es2015 version makes IE11 crash again validating the fix on your side actually has effect and that webpack by default chooses the "module" entry in package.json.
All this makes one wonder if tree-shaking and minification results in webpack could be improved by transpiling ALL node_modules... That's an investigation for another day though!
Thanks again
/Victor
(hacked package.json that makes IE11 error out again, actual observablehooks@alpha works well
"main": "dist/cjs/index.js",
"module": "dist/esm2015/index.js",
"es2015": "dist/esm2015/index.js",
)
Both esm and es2015 support tree-shaking, excpet the esm is transpiled to es5. The es2015 runs better in modern browsers and should have samller minification result.
Glad it works. Happily closing this.