Search code examples
javascriptreactjsarcgisarcgis-js-api

The ArcGIS API failed to load

I have downloaded the npm i --save esri-loader @esri/react-arcgis but why is it i cant load the map? did i miss something?

import React from 'react';
import Map from '../../component/Map/Map.js'
const HomePage = () => {
  return (
    <div>
      <Map/>
    </div>
  );
};

export default HomePage;

component/Map/Map.js

import React , {useRef,useEffect} from 'react';
import {loadModules} from "esri-loader";


function Map() {
    const MapElement=useRef(null)
    useEffect(()=>{
        let view;

    loadModules(["esri/views/MapView", "esri/WebMap"],{
        css:true
    }).then(([MapView, WebMap])=>{
        const webmap= new WebMap({
            basemap:'topo-vector'
        })
        view = new MapView({
            map:webmap,
            center:[],
            zoom:8,
            container:MapElement.current
        })
    })
    return()=>{
        if(!!view){
            view.destroy()
            view=null
        }
    }
    })
    return (
        <div style={{height:800}} ref={MapElement}>
            
        </div>
    )
}

export default Map

the error i get

enter image description here

the reference i used for this https://www.youtube.com/watch?v=0RC1Xf_0UUk

package.json

{
       "name": "@country/app",   "private": true,   "scripts": {
       "start": "webpack serve",
       "start:standalone": "webpack serve --port 9003 --env standalone",
       "build": "concurrently yarn:build:*",
       "build:webpack": "webpack --mode=production",
       "analyze": "webpack --mode=production --env analyze",
       "lint": "eslint src --ext js",
       "format": "prettier --write .",
       "check-format": "prettier --check .",
       "test": "cross-env BABEL_ENV=test jest",
       "watch-tests": "cross-env BABEL_ENV=test jest --watch",
       "prepare": "husky install",
       "coverage": "cross-env BABEL_ENV=test jest --coverage"   },   "devDependencies": {
       "@arcgis/webpack-plugin": "^4.20.0",
       "@babel/core": "^7.15.0",
       "@babel/eslint-parser": "^7.15.0",
       "@babel/plugin-transform-runtime": "^7.15.0",
       "@babel/preset-env": "^7.15.0",
       "@babel/preset-react": "^7.14.5",
       "@babel/runtime": "^7.15.3",
       "@testing-library/jest-dom": "^5.14.1",
       "@testing-library/react": "^12.0.0",
       "babel-jest": "^27.0.6",
       "concurrently": "^6.2.1",
       "cross-env": "^7.0.3",
       "eslint": "^7.32.0",
       "eslint-config-prettier": "^8.3.0",
       "eslint-config-react-important-stuff": "^3.0.0",
       "eslint-plugin-prettier": "^3.4.1",
       "husky": "^7.0.4",
       "identity-obj-proxy": "^3.0.0",
       "jest": "^27.4.3",
       "jest-cli": "^27.4.3",
       "prettier": "^2.3.2",
       "pretty-quick": "^3.1.1",
       "webpack": "^5.51.1",
       "webpack-cli": "^4.8.0",
       "webpack-config-single-spa-react": "^4.0.0",
       "webpack-dev-server": "^4.0.0",
       "webpack-merge": "^5.8.0"   },   "dependencies": {
       "@esri/react-arcgis": "^5.1.0",
       "@material-ui/styles": "^4.11.4",
       "@mui/styles": "^5.2.2",
       "@reach/router": "^1.3.4",
       "arcgis-js-api": "^4.21.2",
       "esri-loader": "^3.3.0",
       "react": "^17.0.2",
       "react-dom": "^17.0.2",
       "single-spa-react": "^4.3.1"   }, }
Solution

  • Sorry for not directly responding to your described error, but I would not use esri-loader with newer versions of ArcGIS for JavaScript API. Why not npm as ES modules which do not require a separate script loader?

    Build with ES Module

    This way you can do simple imports like this:

    import WebMap from "@arcgis/core/WebMap";

    Here are the initial setup instructions:

    Install instructions

    Finally, here is a sample react app from Esri using exactly that:

    Esri React App example