TypeError: undefined is not an object (evaluating 'window.require.on') - ESRI loadModules error

[ketan-voda]

Expected behavior

• ESRI should be able to load the modules
• I'm trying to implement ESRI map using esri-loader
• I'm using create-react-app (v16.8) and esri-loader to load the ESRI modules using JS API (v4.14)

Actual behavior

• My app crashes but only for the Safari browser. If I clear the cache from ArcGIS or if I open Safari in incognito then everything works fine

Steps to reproduce the behavior

This is how I'm loading the modules:

• async preloadAllModules() { _pModuleLoad = loadModules([ 'esri/widgets/Sketch', 'esri/identity/IdentityManager', 'esri/portal/Portal', 'esri/identity/OAuthInfo', 'esri/Map', 'esri/kernel', 'esri/views/MapView', 'esri/geometry/SpatialReference', 'esri/layers/FeatureLayer', 'esri/layers/GraphicsLayer', 'esri/Graphic', 'esri/widgets/Sketch/SketchViewModel', 'esri/geometry/Extent', 'esri/widgets/Search', 'esri/widgets/Expand', 'esri/core/watchUtils', 'esri/widgets/Home', 'esri/widgets/Fullscreen', 'esri/Viewpoint', 'esri/tasks/support/Query', 'esri/widgets/BasemapToggle', 'esri/tasks/Locator', 'esri/layers/WMSLayer', 'esri/layers/KMLLayer', 'esri/layers/GeoRSSLayer', 'esri/layers/CSVLayer', 'esri/tasks/Locator', 'esri/widgets/Zoom', 'esri/geometry/Point', 'esri/core/promiseUtils', 'dojo/on', 'dojo/dom', ], loaderConfig) .then(([ Sketch, esriId, Portal, OAuthInfo, Map, kernel, MapView, SpatialReference, FeatureLayer, GraphicsLayer, Graphic, SketchVM, Extent, Search, Expand, wU, Home, FullScreen, Viewpoint, Query, BaseMapToggle, Locator, WMSLayer, KMLLayer, GeoRSSLayer, CSVLayer, Zoom, Point, promiseUtils, on, dom, ]) => { _esriId = esriId; _Portal = Portal; _OAuthInfo = OAuthInfo; _Sketch = Sketch; _Map = Map; _kernel = kernel; _MapView = MapView; _SpatialReference = SpatialReference; _FeatureLayer = FeatureLayer; _GraphicsLayer = GraphicsLayer; _Graphic = Graphic; _SketchVM = SketchVM; _Extent = Extent; _Search = Search; _Expand = Expand; _wU = wU; _Home = Home; _FullScreen = FullScreen; _Viewpoint = Viewpoint; _Query = Query; _BaseMapToggle = BaseMapToggle; _WMSLayer = WMSLayer; _KMLLayer = KMLLayer; _GeoRSSLayer = GeoRSSLayer; _CSVLayer = CSVLayer; _Locator = Locator; _zoom = Zoom; _Point = Point; _promiseUtils = promiseUtils; _on = on; _dom = dom; }) .catch((err) => { console.log('err', err); while (loadAttempCount < 5) { loadAttempCount++; this.preloadAllModules(); } if (loadAttempCount >= 5) { this.logError('ESRI module load error', {message: err.message}); throw new Error(err); } }); return _pModuleLoad; }

  // utility for loading modules if needed _loadAllModules() { console.log('loadAllModules', _pModuleLoad); return _pModuleLoad !== undefined ? _pModuleLoad : this.preloadAllModules(); }

• I'm not using window.require anywhere explicitly

• I'm attaching the error I get on the Safari console

[andygup]

@ketan-voda I have a few thoughts:

• Option A - Here's another issue thread that discusses a similar problem and potential hack resolution: https://github.com/Esri/esri-loader/issues/148#issuecomment-588593770
• Option B is to test using our ES modules build. It will be available as a beta in a few weeks along with the 4.18 release, but you can try out the pre-release version today: npm install @arcgis/core, and here's a blog post about it.

[andygup]

Closing.