Select to view content in your preferred language

Uncaught TypeError: Cannot read properties of null (reading 'insertBefore')

2296
2
11-10-2021 08:47 PM
KartikThakur
New Contributor

On hard refreshing page map is not visible. I am integrating ArcGIS in my angular project. And I am using

<link rel="stylesheet" href="https://js.arcgis.com/3.38/esri/css/esri.css">
<script src="https://js.arcgis.com/3.38/"></script>
 

It throws error.

 

core.js:6456 ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of null (reading 'insertBefore')
TypeError: Cannot read properties of null (reading 'insertBefore')
at Function.d.injectUrl ((index):36)
at Sa ((index):33)
at a ((index):10)
at (index):20
at Na ((index):29)
at ua ((index):20)
at sa ((index):20)
at d ((index):11)
at esri-loader.js:233
at new ZoneAwarePromise (zone.js:1387)
at resolvePromise (zone.js:1213)
at resolvePromise (zone.js:1167)
at zone.js:1279
at ZoneDelegate.invokeTask (zone.js:406)
at Object.onInvokeTask (core.js:28654)
at ZoneDelegate.invokeTask (zone.js:405)
at Zone.runTask (zone.js:178)
at drainMicroTaskQueue (zone.js:582)
at invokeTask (zone.js:491)
at ZoneTask.invoke (zone.js:476)

 

@Sage 

0 Kudos
2 Replies
AndyGup
Esri Regular Contributor

@KartikThakur we suggest using Esri-loader to help load ArcGIS JS API 3.x in JavaScript frameworks: https://github.com/Esri/esri-loader/blob/master/README.md. For best performance and the latest functionality, we recommend using 4.x latest and our ES modules build: https://github.com/Esri/jsapi-resources/tree/master/esm-samples/jsapi-angular-cli#arcgis-api-for-jav...

0 Kudos
mattheol
New Contributor II

Workaround is to add empty script in head section <script></script> or any other script (if all of your scripts are in body).
We have encountered similiar problem recently when we migrated our repo to webpack 5.
This piece of code takes first script in document, which has type != dojo:

var ya = x.getElementsByTagName("script");
for (d = 0; !Oa; )
   /^dojo/.test((e = ya[d++]) && e.type) || (Oa = e);

Then this script is used in injectUrl method to get parentNode and then insert esri scripts before it. In our case sometimes dynamic chunk script (added temporarily to html document head) was selected. But since dynamic chunks are removed from DOM (parent node becomes undefined) code fails and throws error.

0 Kudos