MapView.js "Object doesn't support this action" - Internet Explorer 11 and JSAPI 4.8

ChrisSmith7 · ‎09-17-2018

Hello all,

Is there a known issue with IE 11 and v4 of the JSAPI? Specifically, I stripped everything out of my application and found there is an issue with MapView, for IE, but not Chrome:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
 <title>IE Issue</title>
 <style>
 html,
 body,
 .embeddedMaps {
 padding: 0;
 margin: 0;
 height: 100%;
 width: 100%;
 }
 </style>
<link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
 <script src="https://js.arcgis.com/4.8/"></script>
<script>
 require([
 "esri/Map",
 "esri/views/MapView",
 "dojo/domReady!"
 ], function (Map,
 MapView
 ) {
 const map = new Map({
 basemap: "gray-vector"
 });
 
 const view = new MapView({
 container: "myMapContainer", 
 map: map,
 zoom: 9,
 center: [-82.457, 27.95]
 });
 });
 </script>
</head>
<body>
 <div class="embeddedMaps" ID="myMapContainer"/>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

IE is reporting the issue in MapView.js on line 806:

SCRIPT445: Object doesn't support this action

...
g(function () {
       d.dispatchEvent(new MessageEvent("message", { //error here... 
             data : b
       }))
 })
...‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

It seems it's choking on MessageEvent(), but according to MessageEvent - Web APIs | MDN - it is supported.

Any ideas? This is a big deal for us as IE support is REQUIRED for our app, unfortunately. This IS working in Edge, it appears.

Thanks!

ChrisSmith7 · ‎09-18-2018

Found it! I'm not sure what was going on earlier with the console errors... they were red herrings, along with the IE security issues loading from file. All of the console errors appear to have disappeared, so it looks like after the jump from v4.5 to 4.6+, the child div of the map container, with class "esri-view-root" no longer inherits dimensions, specifically, height, so it simply doesn't render:

View solution in original post

KellyHutchins · ‎09-17-2018

I ran a quick test using your code above and it displayed for me in IE11. There is a warning about the self closing div in your html. Maybe try switching it to this and see if it helps?

    <div class="embeddedMaps" ID="myMapContainer"></div>‍

ChrisSmith7 · ‎09-18-2018

Kelly,

That was a mistake on my part whittling the app down to the minimum code required to repro. It’s not set-up this way in the actual application.

I’m wondering if there is a corporate security policy for IE on our end that is causing the issue since this is dealing with communication/messaging events.

I tried IE11 in Windows 10 on another machine... first, I was prompted:

"Internet Explorer restricted this webpage from running scripts or ActiveX controls"

After allowing, the issue manifested; however, some new console warnings showed. The only message that showed on my other environment was related to actual error. The new warnings are in relation to some Esri web workers:

ADDENDUM:

I might have to re-approach this... although I am receiving the same error over localhost and deployed to a dev server, the repro code above doesn't throw any errors in IE when hosted in IIS...

KellyHutchins · ‎09-18-2018

"IE when hosted in IIS..."

That's how I tested the app. What are you using to host?

ChrisSmith7 · ‎09-18-2018

The issue was discovered in the app on a dev enviro and on localhost over IIS. When I was creating a test app for reproduction on Geonet, I was just loading it from file.

Just a heads-up, I stopped testing from file and created a small test harness within the application. I find it works if I go back to API v4.5, but not in v4.6+... I'm going to check out release notes to see if anything jumps out at me.

...

So, nothing really looked suspicious, at least for the test harness. I dug in a bit more and tried catching all exceptions. There's nothing really different between 4.5 and 4.8 with regards to that. I can see the XHR requests for the background map tiles coming back with CORS for both versions, only in 4.8, nothing is rendered... and there are no errors in console with the test harness for either version.

ChrisSmith7 · ‎09-18-2018

Found it! I'm not sure what was going on earlier with the console errors... they were red herrings, along with the IE security issues loading from file. All of the console errors appear to have disappeared, so it looks like after the jump from v4.5 to 4.6+, the child div of the map container, with class "esri-view-root" no longer inherits dimensions, specifically, height, so it simply doesn't render: