Why doesn't my feature layer appear in the map in 4.x but it does in 3.x?

[ValCannon2]

Hello,

I am trying to migrate a simple map from JS API 3x to 4x. My test is a simple basemap with one feature layer added from a MapService. I have created what I think is the equivalent code in both APIs but it seems to work in 3x but not 4x. Will someone please take a look at these two pens and see if I made and obvious mistake. They are short, I promise.

https://codepen.io/valcannon/pen/zYKEqdy

https://codepen.io/valcannon/pen/oNzGxov

[Anonymous User]

I think it has something to do with security. Idunno why you can add it in JS3 and not JS4 but read the console log. I can't add  https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3 to portal, AGOL or Pro.

[ValCannon2]

Thanks Adam. Idunno either. There are no errors in the console and when I run this on my local server I get so many Fiddler responses related to VPN that I haven't been able to sort them out. That is why I posted it in CodePen, so I would know that it has nothing to do with my local security. Unless you are actually seeing the layer in the 4x version on CodePen.

[Anonymous User]

Try with this ms. https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/3 works for me.

These are the errors I get in my console log if I try your ms. 

[ValCannon2]

Sure enough, that works for me as well. Back to the original question, why does the other map service draw in 3x but not 4x? Does something need to change on the map service? or my code?

[ValCannon2]

My CodePen tests use an Esri map service but I am having the same issue with an in-house map service.

[ChristianPagel1]

4.18 does not support MS Edge Legacy, try 4.17 or Chrome

[ValCannon2]

Good point but not really important here unless you are actually seeing the layer in the 4x version on CodePen using any browser. What browser are you seeing it in? I'm using Chrome v87.0.4280.88 and Edge v87.0.664.66.