- React App w/ TS
- Using 4.18.1 API via ESM (ES Modules)
After using `npm start` everything works normal and the map shows up. However, following a refresh, esri throws a ton of errors into the console saying mostly:
intl:message-bundle-error
It almost seems like some elements cannot be loaded upon a refresh and I am unsure why.
[esri.widgets.Widget] widget-intl:locale-error esri.widgets.Attribution s {name: "intl:message-bundle-error", details: {…}, message: "Errors occurred while loading "esri/widgets/Attribution/t9n/Attribution""}
[esri.widgets.Widget] widget-intl:locale-error esri.widgets.Zoom s {name: "intl:message-bundle-error", details: {…}, message: "Errors occurred while loading "esri/widgets/Zoom/t9n/Zoom""}
There are a few others, but I wont keep posting the same error.
Code
const Map = (props: any) => {
const classes = useStyles();
const mapDiv = useRef(null);
useEffect(() => {
if (mapDiv.current) {
const geoJSONLayer = new GeoJSONLayer({
url: process.env.PUBLIC_URL + "/example.json",
outFields: ["*"]
});
const map = new ArcGISMap({
basemap: "topo",
ground: "world-elevation",
layers: [geoJSONLayer]
});
const view: any = new SceneView({
container: mapDiv.current!,
map: map,
camera: {
position: {
x: -117.2894323197821, //Longitude
y: 33.1323345199911, //Latitude
z: 3000 //Meters
},
tilt: 0
}
});
view.when(function () {
// allow navigation above and below the ground
map.ground.navigationConstraint = {
type: "none"
};
// to see through the ground, set the ground opacity to 0.4
// map.ground.opacity = 0.4;
});
}
}, []);
return (
<>
<div className={classes.mapImage} ref={mapDiv}>
</div>
</>
);
}
Solved! Go to Solution.
Try checking these two items:
- Make sure to copy the assets folder as described here: https://github.com/Esri/jsapi-resources/tree/master/esm-samples/jsapi-create-react-app
- Also, make sure to set config.assetsPath: https://developers.arcgis.com/javascript/latest/api-reference/esri-config.html#assetsPath. I know you are using React, but here's an Angular example.
Try checking these two items:
- Make sure to copy the assets folder as described here: https://github.com/Esri/jsapi-resources/tree/master/esm-samples/jsapi-create-react-app
- Also, make sure to set config.assetsPath: https://developers.arcgis.com/javascript/latest/api-reference/esri-config.html#assetsPath. I know you are using React, but here's an Angular example.
"copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets",
"postinstall": "npm run copy"
I do already have this, so that is good.
--------------------
Wow, I did not have that config set for `assetsPath`. The issue is it defaults to `./assets` rather than `/assets`. I cannot believe that fixed the issue. Thanks a lot Andy, SUPER HELPFUL!