Erros Occurred While Loading Widgets

[developerarce]

- 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>
    </>
  );
}

[AndyGup · Accepted 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.

[developerarce]

"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!