topic Re: Uncaught TypeError: Cannot read properties of null (reading 'insertBefore') in ArcGIS JavaScript Maps SDK Questions

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

KartikThakur — Thu, 11 Nov 2021 04:51:36 GMT

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

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

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

AndyGup — Thu, 11 Nov 2021 16:08:34 GMT

@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-javascript-with-angular-cli.

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

mattheol — Wed, 08 Nov 2023 12:21:38 GMT

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.