question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

IE11 and other old browsers (how to make it work)

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
crimxcommented, Jun 10, 2020

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.

0reactions
SweVictorcommented, Jun 10, 2020

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", 

)

Read more comments on GitHub >

github_iconTop Results From Across the Web

Tips and tricks to manage Internet Explorer compatibility
Restart Internet Explorer 11 and open the site you're testing, then go to Emulation tab in the F12 Developer Tools and select Enterprise...
Read more >
Selecting an older browser mode in Internet Explorer 11
You can now choose a previous version of Internet Explorer to emulate using the Document Mode drop down menu. IE11_emulation1. You can also ......
Read more >
Set up Legacy Browser Support for Microsoft Edge in IE mode
Step 3: Configure Microsoft Edge browser policies · Go to Administrative Templates and then · Automatically install the Legacy Browser Support for IE...
Read more >
How to bring back "Browser mode" in IE11? - Stack Overflow
ORIGINAL QUESTION: When IE11 preview is installed on Windows 7, it comes with old-fashioned F12 tool which allows to change browser modes. enter ......
Read more >
Internet Explorer 11 has retired and is officially out of support ...
But the web has evolved and so have browsers. ... websites might be built on older internet technology and not function properly while...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found