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.