topic Re: Error while loading loading map. in ArcGIS JavaScript Maps SDK Questions

Error while loading loading map.

Valgenmap — Wed, 14 Apr 2021 13:21:11 GMT

I'm using React [^17.0.1] and arcgis-js-api [^4.18.1] for the app,

After 'npm start' I'm receiving the below errors,

[esri.widgets.Widget] widget-intl:locale-error esri.widgets.Attribution TypeError: t is not a constructor [esri.widgets.Widget] widget-intl:locale-error esri.widgets.Zoom TypeError: t is not a constructor [esri.widgets.Widget] widget-intl:locale-error esri.widgets.Popup TypeError: t is not a constructor [esri.Basemap] #load() Failed to load basemap (title: 'Basemap', id: 'gray-vector') TypeError: t is not a constructor Zoom.js:5 Uncaught (in promise) TypeError: Cannot read property 'zoomIn' of null

Code:

import React, { useState, useRef, useEffect } from 'react'; import { Card, CardBody, CardTitle } from 'reactstrap'; import ArcGISMap from '@arcgis/core/Map'; import MapView from '@arcgis/core/views/MapView'; import esriConfig from '@arcgis/core/config'; import '../../assets/css/map.css'; const SalesChartCard = () => { esriConfig.assetsPath = '../node_modules/@arcgis/core/assets'; const mapDiv = useRef(null); useEffect(() => { if (mapDiv.current) { /** * Initialize application */ const map = new ArcGISMap({ basemap: 'gray-vector', }); /* eslint-disable no-unused-vars */ const view = new MapView({ map, container: mapDiv.current, extent: { spatialReference: { wkid: 102100, }, xmax: -13581772, xmin: -13584170, ymax: 4436367, ymin: 4435053, }, }); /* eslint-enable no-unused-vars */ } }, []); const [isInFullScreen, setIsInFullScreen] = useState(false); const isInFullScreenFn = () => { return ( (document.fullscreenElement && document.fullscreenElement !== null) || (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) || (document.mozFullScreenElement && document.mozFullScreenElement !== null) || (document.msFullscreenElement && document.msFullscreenElement !== null) ); }; const toggleFullScreen = () => { const isFS = isInFullScreenFn(); const docElm = document.documentElement; if (!isFS) { if (docElm.requestFullscreen) { docElm.requestFullscreen(); } else if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); } else if (docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); } else if (docElm.msRequestFullscreen) { docElm.msRequestFullscreen(); } } else if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } setIsInFullScreen(!isFS); }; return ( <Card> <button className="position-absolute card-top-buttons header-icon btn btn-empty d-none d-sm-inline-block" type="button" id="fullScreenButton" onClick={toggleFullScreen} > {isInFullScreen ? ( <i className="simple-icon-size-actual d-block" /> ) : ( <i className="simple-icon-size-fullscreen d-block" /> )} </button> <CardBody> <CardTitle>Map</CardTitle> <div className="mapDiv" ref={mapDiv} /> </CardBody> </Card> ); }; export default SalesChartCard;

package.json

"scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "lint": "eslint .", "lint:fix": "eslint . --fix", "precommit": "lint-staged", "copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets", "postinstall": "npm run copy" }

I tried the solution mentioned in this post

Re: Error while loading loading map.

AndyGup — Wed, 14 Apr 2021 19:34:41 GMT

Hi @Valgenmap can you please share the entire package.json file? Are you using arcgis-js-api or @arcgis/core? Those are both JS API with the exact same functionality, but they use different module types. arcgis-js-api is AMD and @arcgis/core is ES modules.

Re: Error while loading loading map.

AndyGup — Wed, 14 Apr 2021 19:50:58 GMT

I suspect you are using @Anonymous User/core. If that's what's installed then you can try testing with the "next" version by running:

npm i @ArcGis/core@next

And, then remove these two lines from package.json. That might fix the issue you are seeing:

"copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets", "postinstall": "npm run copy"

Re: Error while loading loading map.

Valgenmap — Thu, 15 Apr 2021 03:42:39 GMT

Hi Andy,

Here is my package.json

{ "name": "gogo-react", "version": "5.3.0", "description": "Gogo - React Bootstrap 4 Admin Dashboard Template", "private": true, "dependencies": { "@arcgis/core": "^4.18.1", "@glidejs/glide": "^3.4.1", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "availity-reactstrap-validation": "^2.7.0", "axios": "^0.21.1", "chart.js": "2.9.4", "classnames": "2.2.6", "firebase": "^8.2.2", "formik": "^2.2.6", "moment": "2.29.1", "mousetrap": "^1.6.5", "node-sass": "^4.14.1", "prop-types": "^15.7.2", "rc-slider": "^9.7.1", "rc-switch": "^3.2.2", "react": "^17.0.1", "react-albus": "^2.0.0", "react-autosuggest": "^10.1.0", "react-big-calendar": "^0.30.0", "react-circular-progressbar": "^2.0.3", "react-contextmenu": "^2.14.0", "react-datepicker": "^3.4.0", "react-dom": "^17.0.1", "react-dropzone-component": "^3.2.0", "react-google-maps": "^9.4.5", "react-headroom": "^3.1.0", "react-image-lightbox": "^5.1.1", "react-intl": "5.10.15", "react-lines-ellipsis": "^0.14.1", "react-perfect-scrollbar": "^1.5.8", "react-quill": "^1.3.5", "react-rater": "^5.1.1", "react-redux": "^7.2.2", "react-router-dom": "^5.2.0", "react-scripts": "^4.0.1", "react-scroll": "^1.8.1", "react-select": "^3.1.1", "react-sortablejs": "^6.0.0", "react-table": "7.6.3", "react-tagsinput": "^3.19.0", "react-transition-group": "^4.4.1", "react-yandex-maps": "^4.6.0", "reactstrap": "^8.8.1", "redux": "^4.0.5", "redux-saga": "^1.1.3", "sortablejs": "^1.13.0", "video.js": "^7.12.1", "web-vitals": "^1.1.0", "yup": "^0.32.8" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "lint": "eslint .", "lint:fix": "eslint . --fix", "precommit": "lint-staged", "copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets", "postinstall": "npm run copy" }, "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "src/.js": [ "eslint --fix", "git add" ] }, "browserslist": [ ">0.2%", "not dead", "not ie <= 11", "not op_mini all" ], "devDependencies": { "ncp": "^2.0.0", "eslint": "^7.17.0", "eslint-config-airbnb": "^18.2.1", "eslint-config-prettier": "^7.1.0", "eslint-plugin-import": "^2.22.1", "eslint-plugin-jsx-a11y": "^6.4.1", "eslint-plugin-prettier": "^3.3.1", "eslint-plugin-react": "^7.22.0", "husky": "^4.3.7", "lint-staged": "^10.5.3", "prettier": "^2.2.1" } }

Re: Error while loading loading map.

Valgenmap — Thu, 15 Apr 2021 05:13:11 GMT

Hi Andy,

I followed the suggestions mentioned by you, then I'm receiving the same errors including the unhandled rejection.

Error after applying changes

package.json looks like this,

{ "name": "gogo-react", "version": "5.3.0", "description": "Gogo - React Bootstrap 4 Admin Dashboard Template", "private": true, "dependencies": { "@arcgis/core": "^4.19.0-next.20210407", "@glidejs/glide": "^3.4.1", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "availity-reactstrap-validation": "^2.7.0", "axios": "^0.21.1", "chart.js": "2.9.4", "classnames": "2.2.6", "firebase": "^8.2.2", "formik": "^2.2.6", "moment": "2.29.1", "mousetrap": "^1.6.5", "node-sass": "^4.14.1", "prop-types": "^15.7.2", "rc-slider": "^9.7.1", "rc-switch": "^3.2.2", "react": "^17.0.1", "react-albus": "^2.0.0", "react-autosuggest": "^10.1.0", "react-big-calendar": "^0.30.0", "react-circular-progressbar": "^2.0.3", "react-contextmenu": "^2.14.0", "react-datepicker": "^3.4.0", "react-dom": "^17.0.1", "react-dropzone-component": "^3.2.0", "react-google-maps": "^9.4.5", "react-headroom": "^3.1.0", "react-image-lightbox": "^5.1.1", "react-intl": "5.10.15", "react-lines-ellipsis": "^0.14.1", "react-perfect-scrollbar": "^1.5.8", "react-quill": "^1.3.5", "react-rater": "^5.1.1", "react-redux": "^7.2.2", "react-router-dom": "^5.2.0", "react-scripts": "^4.0.1", "react-scroll": "^1.8.1", "react-select": "^3.1.1", "react-sortablejs": "^6.0.0", "react-table": "7.6.3", "react-tagsinput": "^3.19.0", "react-transition-group": "^4.4.1", "react-yandex-maps": "^4.6.0", "reactstrap": "^8.8.1", "redux": "^4.0.5", "redux-saga": "^1.1.3", "sortablejs": "^1.13.0", "video.js": "^7.12.1", "web-vitals": "^1.1.0", "yup": "^0.32.8" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "lint": "eslint .", "lint:fix": "eslint . --fix", "precommit": "lint-staged" }, "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "src/.js": [ "eslint --fix", "git add" ] }, "browserslist": [ ">0.2%", "not dead", "not ie <= 11", "not op_mini all" ], "devDependencies": { "ncp": "^2.0.0", "eslint": "^7.17.0", "eslint-config-airbnb": "^18.2.1", "eslint-config-prettier": "^7.1.0", "eslint-plugin-import": "^2.22.1", "eslint-plugin-jsx-a11y": "^6.4.1", "eslint-plugin-prettier": "^3.3.1", "eslint-plugin-react": "^7.22.0", "husky": "^4.3.7", "lint-staged": "^10.5.3", "prettier": "^2.2.1" } }

The SalesChartCard.js

import React, { useRef, useEffect } from 'react'; import { Card, CardBody, CardTitle } from 'reactstrap'; import ArcGISMap from '@arcgis/core/Map'; import MapView from '@arcgis/core/views/MapView'; import esriConfig from '@arcgis/core/config'; import '../../assets/css/map.css'; const SalesChartCard = () => { esriConfig.assetsPath = '/assets'; const mapDiv = useRef(null); useEffect(() => { if (mapDiv.current) { /** * Initialize application */ const map = new ArcGISMap({ basemap: 'gray-vector', }); /* eslint-disable no-unused-vars */ const view = new MapView({ map, container: mapDiv.current, extent: { spatialReference: { wkid: 102100, }, xmax: -13581772, xmin: -13584170, ymax: 4436367, ymin: 4435053, }, }); /* eslint-enable no-unused-vars */ } }, []); return ( <Card> <CardBody> <CardTitle>Map</CardTitle> <div className="mapDiv" ref={mapDiv} /> </CardBody> </Card> ); }; export default SalesChartCard;

The Github repo: Link for your reference.

Thanks in advance.

Re: Error while loading loading map.

AndyGup — Thu, 15 Apr 2021 15:28:20 GMT

Whoops, I missed one entry. Try also removing this line of code from SalesChartCard.js:

esriConfig.assetsPath = '/assets';

Re: Error while loading loading map.

Valgenmap — Fri, 16 Apr 2021 05:21:51 GMT

Hi @AndyGup , I removed the the line as you mentioned and also implemented the earlier changes, but still I'm receiving the same errors.

[esri.widgets.Widget] widget-intl:locale-error esri.widgets.Attribution TypeError: t is not a constructor [esri.widgets.Widget] widget-intl:locale-error esri.widgets.Zoom TypeError: t is not a constructor index.js:1 [esri.widgets.Widget] widget-intl:locale-error esri.widgets.Popup TypeError: t is not a constructor [esri.Basemap] #load() Failed to load basemap (title: 'Basemap', id: 'gray-vector') TypeError: t is not a constructor workerFactory.js:5 Uncaught (in promise) TypeError: e is not a function Uncaught (in promise) TypeError: Cannot read property 'zoomIn' of null

errors

Kindly can you look into updated Git repo and suggest solution.

Re: Error while loading loading map.

AndyGup — Fri, 16 Apr 2021 18:28:26 GMT

@Valgenmap Nice site! I didn't see the errors on npm start. Any chance you can provide a repo with just the mapping component that reproduces this issue? That will help to try and isolate the problem.

Re: Error while loading loading map.

Valgenmap — Mon, 19 Apr 2021 03:55:48 GMT

@AndyGup, I don't have a separate repo for the mapping component. Actually, I followed the sample provided by the ESRI and the example code by the gogo theme.

For developmental purpose in 'SalesChartCard.js' file I'm trying to implement the ESRI JS Map.

Run 'npm start' the application loads at

'http://localhost:3000/'

after redirect to

'http://localhost:3000/app/dashboards/default'

then the application breaks and starts to give errors.

I have adopted the changes you mentioned but still I'm facing the same issues.

Kindly look into this repo .

Re: Error while loading loading map.

AndyGup — Mon, 19 Apr 2021 15:09:13 GMT

@Valgenmap I followed your instructions and I do see the error now. But I didn't see anything obvious, and I don't understand the architecture of your app. It's too large for simple troubleshooting we can provide through this forum or through Esri tech support.

My recommendation is to create a branch and de-construct the app - keep simplifying it - until you figure out the problem. Since you know the architecture I think that wouldn't take very long. The only other alternative is to open a contract with our professional services and they can dedicate time to this level of troubleshooting.

Re: Error while loading loading map.

NicoleSulzberger — Wed, 21 Apr 2021 11:30:31 GMT

I am having the same issue. As long as I serve the application from

http://localhost:4200 it works fine, but when I publish it to a subfolder,

http://localhost:4200/storme/web/private/home i am getting errors.

I can see that it tries to load the assets from /storme/web/assets/esri/widgets, but I would expect it to load from /storme/web/private/assets/esri/widgets.

I wonder if it has to do with routing, as the "home" part from my url is part of the routing, and not from the web app base path.

I am setting now the assets path static to /storme/web/private/assets/

Re: Error while loading loading map.

AndyGup — Wed, 21 Apr 2021 17:54:26 GMT

It sounds like your assetsPath isn't configured correctly for the subfolder. Are you using the AMD or ES modules (arcgis-js-api or @arcgis/core)?

Version 4.19 which is releasing in the next few days has a fix for this. At 4.19 the assets will be pulled from CDN by default so there's no need to configure assetsPath unless you need local assets. You can test this by updating to the "next" version and commenting out your config.assetsPath:

npm i @arcgis/core@next

Re: Error while loading loading map.

NicoleSulzberger — Wed, 21 Apr 2021 15:47:00 GMT

we are using the ES modules. Thanks for letting me know, looking forward to the next release then 🙂

Re: Error while loading loading map.

Valgenmap — Tue, 27 Apr 2021 13:15:37 GMT

I have updated the npm packages in the repo, now I am able to see the Map loading in the app.

Now I'm using

"@arcgis/core": "^4.19.1"

Thank you @AndyGup

I am trying to add featureLayer on the Map., but not able to see the feature layer.

Am I following the right track to bring the feature layer into app. Kindly guide me on this.

Here is the below code,

SalesChartCard.js

import React, { useState } from 'react'; import { Card, CardBody, CardTitle } from 'reactstrap'; import IntlMessages from '../../helpers/IntlMessages'; import Map from '../../components/mapcomponent/map'; import MyFeatureLayer from '../../components/mapcomponent/Layers/MyFeatureLayer'; const SalesChartCard = () => { const [isInFullScreen, setIsInFullScreen] = useState(false); const isInFullScreenFn = () => { return ( (document.fullscreenElement && document.fullscreenElement !== null) || (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) || (document.mozFullScreenElement && document.mozFullScreenElement !== null) || (document.msFullscreenElement && document.msFullscreenElement !== null) ); }; const toggleFullScreen = () => { const isFS = isInFullScreenFn(); const docElm = document.documentElement; if (!isFS) { if (docElm.requestFullscreen) { docElm.requestFullscreen(); } else if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); } else if (docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); } else if (docElm.msRequestFullscreen) { docElm.msRequestFullscreen(); } } else if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } setIsInFullScreen(!isFS); }; return ( <Card> <div className="position-absolute card-top-buttons"> <button className="header-icon btn btn-empty d-none d-sm-inline-block" type="button" id="fullScreenButton" onClick={toggleFullScreen} > {isInFullScreen ? ( <i className="simple-icon-size-actual d-block" /> ) : ( <i className="simple-icon-size-fullscreen d-block" /> )} </button> </div> <CardBody> <CardTitle> <IntlMessages id="dashboards.map" /> </CardTitle> <Map> <MyFeatureLayer /> </Map> </CardBody> </Card> ); }; export default SalesChartCard;

map.js

/* eslint-disable */ import React, { useRef, useEffect } from 'react'; import ArcGISMap from '@arcgis/core/Map'; import MapView from '@arcgis/core/views/MapView'; import '../../assets/css/map.css'; const Map = () => { const mapDiv = useRef(null); useEffect(() => { if (mapDiv.current) { /** * Initialize application */ const map = new ArcGISMap({ basemap: 'gray-vector', }); /* eslint-disable no-unused-vars */ const view = new MapView({ map, container: mapDiv.current, center: [-95.7129, 37.0902], zoom: 3, }); /* eslint-enable no-unused-vars */ view.ui.move('zoom', 'bottom-left'); } }, []); return <div className="mapDiv" ref={mapDiv} />; }; export default Map;

MyFeatureLayer.js

import { useEffect, useState } from 'react'; import FeatureLayer from '@arcgis/core/layers/FeatureLayer'; function MyFeatureLayer(props) { console.log(props); const [myFeatureLayer, setMyFeatureLayer] = useState(null); useEffect(() => { // eslint-disable-next-line no-shadow const myFeatureLayer = new FeatureLayer({ url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2', }); setMyFeatureLayer(myFeatureLayer); props.map.add(myFeatureLayer); return function cleanup() { props.map.remove(myFeatureLayer); }; }, [myFeatureLayer, props]); return null; } export default MyFeatureLayer;

Re: Error while loading loading map.

AndyGup — Tue, 27 Apr 2021 14:31:16 GMT

@Valgenmap I'm not sure what's going on. This code doesn't look right:

There is a working example you can look at here: https://github.com/Esri/nearby-javascript. And just for reference:

View code - https://github.com/Esri/nearby-javascript/blob/master/src/components/WebMapView.tsx

FeatureLayer - https://github.com/Esri/nearby-javascript/blob/master/src/data/layers.ts#L91

Re: Error while loading loading map.

Dogan — Mon, 31 May 2021 15:40:36 GMT

Hi Andy,

I have also similar problem in our application, and could not figure out where is the problem.

Any ideas on that?