JavaScript module not working in Edge browser - javascript

I am having trouble with my JavaScript module in the Edge browser. In Chrome everything works perfectly. Since my users have both Edge and Chrome available to them, the application has to work in both.
I asked the question here earlier, but I failed to to provide enough code to reproduce the problem. I have now made this pen https://codepen.io/johannes1/pen/GRjBpxz, that works in Chrome but not in Edge.
In my header I have:
<script type="module" src="js/app.js"></script>
It is my understanding that ES6 modules work in Edge and chrome alike, so the mistake has to be mine, but I cannot find it. I am really stuck and would very much appreciate any insight.

Edge only supports ES6 modules in version 79 (Jan 2020) or newer.
Since Edge releases are tied to major updates to Windows 10, it is easy to get stuck on an old version.
In general I recommend that Windows users make it a point to check Windows Update for prompts to install upgrades to the OS, but that doesn't help much from the typical developer's point of view.
If you need to support old versions of Edge, then use Webpack (or one of its rivals like rollup) to bundle your modules instead of relying on browser support for them.

Related

How to deal with broken browsers?

I have a general question. I'm working on my first program in JavaScript and while I'm working on them I experienced some weird "broken browser"-problems.
During the weeks of work on my program I tested the project often on different browsers and computer systems. While doing it I observed weird behavior on Firefox and Chrome in specific versions. In both cases the program worked fine in both browsers then suddenly I experienced problems in Firefox on Windows on one machine. After some research I tried to update the browser and the problem was gone. The same experience I had on Chrome on Linux. It worked fine, then suddenly I had problems with Chrome 48. I tested the program on Mac and Windows, everything was fine. Then I recognized that the browsers on this machines has the version 54. So I updated on my Linux machine to the newest version and the problem was gone.
My Question: is it normal that such things happen with specific versions of browsers and if so, how to deal with it if you're working on bigger projects?
Edit: From the answers below I see that I was not clear with my question. The Question is not really about cross-browser compatibility than more about why a programm works in chrome v47, but not in v48, and then it works again in v54. Same for Firefox and other browsers.
You have to read about cross-browser compatibility.
Each browser may have different implemenations of specific functions or even do not have.
For older browsers like IE8 and less even simple window.innerWidth
doesn't work.
jQuery may help you. Its library which effectively provides cross browser compatibility for a lot of cases.
Another way to test if browser support some function is using Modernizr
You can also check support manually by websites like caniuse.com - works mainly for css styles but also js

How can I test on IE8 after installing IE11?

I need to test javascript on IE8 but since I updated I cannot install IE8. What do developers do in this situation?
The most reliable way is having multiple virtual machines installed on your computer (or on a testingstation) that run different windows versions and IE versions.
There is no way to install IE8 or multiple IE versions at the same time on one windows installation.
You find all windows versions and IE versions here and also some instructions how to set up the virtual machines.
Another way is to use the tool IETester, which only runs on windows and kind of simulates different IE's. It never really felt reliable to me.
There are also different companies, which provide multi-browser testing suites. They allow you to remotely test browsers (including IE8) remotely on their servers. For example Browserling or Browserstack.
Use a VM! Get something like virtualbox and you can get the box from Microsoft https://dev.windows.com/en-us/microsoft-edge/tools/vms/windows/
You can use the emulator built into 11 but know that it's not a direct emulation and isn't the real thing. A VM will create a new machine that is running a paired down version of windows and the browser.
If you open the developer tools there is a button on the top right corner which allows you to run the browser as an older version of IE:

Underscore.string browser support

Underscore.string seems to provide nice features for javascript string manipulation.
It seems to have all the good points:
license : MIT
dependencies : none, it is an extension for Underscore.js but it can be used as standalone, without underscore.js
weight (minified & gzipped): 4KB
community, contributors: 58 contributors on Github
history, contributions: since mid 2010 on Github, contributions seem rather stable although pretty quiet since 2014
Except one point for which I am missing info: the "browser support/compatibility". I am especially worried about older version of IE.
I could find some issues (who have been fixed) on Github for various browser versions, but I could not find any clear statement regarding the browser support:
https://github.com/epeli/underscore.string/pull/37
https://github.com/epeli/underscore.string/issues?q=IE8
https://github.com/epeli/underscore.string/issues/115
I also searched on StackOverflow & did some googling but no luck.
I assume there is no "official" support for browsers so if anyone has experience in using Underscore.string in a production environment where users are on old browsers (IE8+) that would be great.
EDIT:
I also added a question directly on Github to try to get an answer, I'll update this page if I hear anything from there. See https://github.com/epeli/underscore.string/issues/304
As pointed out by epeli on the issue I posted on the Github project: running the test suite on IE8 seems a good way to find out if this library is supported by IE8.
Hence I did so, and found out that the result was positive: IE8 is supported by Underscore.string javascript library.
See the result of my test below

Does Selenium integrate "independent" browsers (via webdrivers) or use existing browsers installed in the OS?

I am new the Cross Browser Testing and just starting to look at Selenium however I can't seem to find the answer to the followings on the official site. It would be much appreciated if someone can help clarify for me.
Does Selenium integrate "independent browsers" (via webdrivers) or uses/links existing browsers installed in the OS?
If Selenium uses "independent browsers", can it actually "open" for instance say IE7, IE8, IE9, IE10, Safari in OS (say windows) separately after which you can test the UI?
1) The browsers that you want to be tested should be installed in your machine. so the answer is it uses existing browsers.
2) No. You have misunderstood.It can automate only the browsers available in the OS. BTW, you can not have multiple version of same browsers in same machine... unless you run from a pen drive.
Using RemoteWebDriver and Selenium Grid, you can have different machines hosting different versions of browsers.
The tests will still execute on your machine but the browser will open on a machine which has the version you define in the test.
This is especially useful when running tests as part of a CI build when the CI server will often not have browsers installed.
Building and maintaining your own grid can be time consuming so companies such as Saucelabs provide a cloud solution in which you point your tests to open browsers on their grid. They have most combination of browsers, versions and os.

Odd IE9/7 style issue

So i am completely baffled by this and hoping someone can give me some ideas to try. Not sure what details to include so let me know if i dont describe it enough and i'll add more.
We inherited a .Net MVC 4 app from a former company that already has a version on our clients production server. Recently, after a few updates from us, our client noticed that some of the menu items, styling, etc is screwed up on their test and QA servers in IE9 but works on production (Production is still from the previous companies publish). The test and QA versions also work fine in FF and Chrome
Using IETester and IE11, I tried viewing the page in IE9 mode but I did not see the same issues that my client is having, so i tried some older versions out of curiosity. I managed to reproduce the issue, but in IE7 not IE9. I had my client verify that he is in fact using IE9 and he is.
I did a compare with older versions of our _Layout.cshtml and there isnt a single thing that changed other than a favico entry. As far as i can tell, we havent changed any css or styling.
I have a webex meeting with the client tomorrow to look at his IE to see if i can find anything, but can anyone give me some ideas of what could cause this? Particularly that this page works in my IE9 but not his?
sometimes when you set the default browser mode to be ie7 and the document mode to be ie9 standard and you try again to change the browser mode to be ie9 compat view then unfortunately the browser version will be detected as ie7 , the solution for this problem is to change the browser mode to be ie9 but not ie9 compat view then the browser version will be detected as ie9

Categories