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!

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

ChrisSmith7

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:

<SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN>DOCTYPE html<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>html<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>head<SPAN class="operator token">></SPAN>
 <SPAN class="operator token"><</SPAN>meta charset<SPAN class="operator token">=</SPAN><SPAN class="string token">"utf-8"</SPAN><SPAN class="operator token">></SPAN>
 <SPAN class="operator token"><</SPAN>meta name<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewport"</SPAN> content<SPAN class="operator token">=</SPAN><SPAN class="string token">"initial-scale=1,maximum-scale=1,user-scalable=no"</SPAN><SPAN class="operator token">></SPAN>
 <SPAN class="operator token"><</SPAN>title<SPAN class="operator token">></SPAN>IE Issue<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>title<SPAN class="operator token">></SPAN>
 <SPAN class="operator token"><</SPAN>style<SPAN class="operator token">></SPAN>
 html<SPAN class="punctuation token">,</SPAN>
 body<SPAN class="punctuation token">,</SPAN>
 <SPAN class="punctuation token">.</SPAN>embeddedMaps <SPAN class="punctuation token">{</SPAN>
 padding<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
 margin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
 height<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
 width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="punctuation token">}</SPAN>
 <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>style<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>link rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F4.8%2Fesri%2Fcss%2Fmain.css" target="_blank">https://js.arcgis.com/4.8/esri/css/main.css</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN>
 <SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F4.8%2F" target="_blank">https://js.arcgis.com/4.8/</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN>
 <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
 <SPAN class="string token">"esri/Map"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"esri/views/MapView"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"dojo/domReady!"</SPAN>
 <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>Map<SPAN class="punctuation token">,</SPAN>
 MapView
 <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
 <SPAN class="keyword token">const</SPAN> map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
 basemap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"gray-vector"</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 
 <SPAN class="keyword token">const</SPAN> view <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
 container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"myMapContainer"</SPAN><SPAN class="punctuation token">,</SPAN> 
 map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN>
 zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">9</SPAN><SPAN class="punctuation token">,</SPAN>
 center<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">82.457</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">27.95</SPAN><SPAN class="punctuation token">]</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>head<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>body<SPAN class="operator token">></SPAN>
 <SPAN class="operator token"><</SPAN>div <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"embeddedMaps"</SPAN> ID<SPAN class="operator token">=</SPAN><SPAN class="string token">"myMapContainer"</SPAN><SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>body<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>html<SPAN class="operator token">></SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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

SCRIPT445: Object doesn't support this action

<SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN>
<SPAN class="token function">g</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; d<SPAN class="punctuation token">.</SPAN><SPAN class="token function">dispatchEvent</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MessageEvent</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"message"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">//error here... </SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; data <SPAN class="punctuation token">:</SPAN> b
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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!

Find more posts tagged with

Accepted answers

ChrisSmith7

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:

All comments

ChrisSmith7

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.

khutchins

"IE when hosted in IIS..."

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

ChrisSmith7

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...

khutchins

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?

&nbsp;&nbsp;&nbsp; <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">class</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>embeddedMaps<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">ID</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>myMapContainer<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.