Esri / react-arcgis

A few components to help you get started using the ArcGIS API for JavaScript and esri-loader with React
Apache License 2.0
319 stars 79 forks source link

Uncaught ReferenceError: require is not defined And Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'on') #224

Closed KevinJustinTrinidad1104 closed 2 years ago

KevinJustinTrinidad1104 commented 2 years ago

Why is it I am having this kind of error? I imported what needs tobe imported npm i esri-loader-hooks, npm i esri-loader, npm i arcgis-js-api,

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

error

image
tomwayson commented 2 years ago

@RonaldAroyo - it doesn't look like your example pertains to this repository. You should not need react-arcgis and esri-loader-hooks - you would use one or the other, and it doesn't look like you are using either in your sample above. You definitely do not need arcgis-js-api.

I'm closing this issue b/c we are archiving this repository - if you still need help w/ the above issue, please open an issue on the esri-loader repository.