VectorTileLayer.loadStyle() is failing in Javascript API

[EmoryHorvath]

All of the sudden, this morning i started getting the following error when calling VectorTileLayer.loadStyle() in the Javascript API (Version 4.5).

Uncaught TypeError: Cannot read property 'path' of null
    at r (VectorTileLayer.js:7)
    at q (VectorTileLayer.js:6)
    at Object.f.loadMetadata (VectorTileLayer.js:10)
    at Object.g._getSourceAndStyle (VectorTileLayer.js:52)
    at Object.g.loadStyle (VectorTileLayer.js:50)
    at initVectorTyleStyles (COS_MapControl.html:1043)
    at openLargeMap (COS_MapControl.html:874)
    at <anonymous>:1:1

The code worked 30 minutes ago, and then suddenly stopped working.  I'm pretty sure it's the same code and i don't think anything else has changed.  The root.json file that i'm passing it is unchanged.  I'm still looking into this, but i'm wondering if something perhaps broke with ESRI's updates last night?  I'm hitting against Version 4.5 though, so in theory nothing should have changed there.

Javascript API Version 4.5.  Happens also on 4.6.  Windows 10, both Chrome & Firefox.  The offending root.json file is attached.

Thank you,

Emory H

[ReneRubalcava]

Is this on your portal or in online? It looks like custom tiles, so just want to verify.

[EmoryHorvath]

Yep, it's a custom vector tile layer on our portal.  It's actually probably publicly visible (for now), but i can't share the URL publicly on the forum.

[ReneRubalcava]

Nothing looks off as far as I can tell, and I tested loadStyle() with some other services and they seem to work ok. When you do the loadStyle() is it with a URL to the root.json or passing the object?

It could be a data issue or something else with the service.

[EmoryHorvath]

I'm passing in the object, because i want to modify it.  But the object i'm passing in right now is unmodified.  Got it via $.ajax() and ran it through JSON.parse(), and nothing else.

I didn't know you could do a URL as well.  I just tried the URL variant and it seems to work (though of course the URL variant won't answer my needs).

Okay, i'll do some more looking into this.  Thanks.

[UndralBatsukh]

How are you loading the vectortilelayer initially? 

[UndralBatsukh · Accepted solution]

If you are loading the vectortilelayer using the json object you provided in the zip file then the vectortilelayer wont load because vector tile source url is not defined in the style object. The style json object must have the fully qualified url for the tiles if you are loading your vector tile layer from the style object. If you create a vector tile layer from style url or service url then we find the required resources using relative paths. hope this makes sense.

[EmoryHorvath]

I'm loading the vector tile layer from a service url.  Then i grab the associated root.json file via $.ajax() and apply it via loadStyle(), after making normal modifications to it (or not).  The funky thing is that things were actually working okay for about 30 minutes this morning, and then it suddenly stopped working and i've never been able to get it working since.  My admins claim they haven't made any changes to the vector tile service or servers.  However, another dev in our office isn't having any problems with his own calling of loadStyle() with a different service.  And also my issue happens with 4.4, 4.5, and 4.6.  Thus i suspect an issue with my vector tile service instead, especially since the mapper who created the service is inexperienced with vector tile layers.  Next week, i'll reboot my dev box, clear my browser caches, and have another go at it and try some different services as well.

[EmoryHorvath]

The fix for the issue was basically what Undral Batsukh said.  However you also have to set the 'sprite' and 'glyphs' paths to fully qualified url's as well (if they're not already).  Otherwise all your point layers stop drawing.