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

KartikThakur

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 

mattheol

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.