(P1)
I started building an extremely basic WebMap with React (version: ^18.0) and ArcGIS APIs. I chose AMD modules instead of ES and used NPM as the package manager. I did not choose NPM but it did not install yarn (used: npx create-react-app-'name') and I kept using NPM.
I've created a Map.js script alongside the default App.js and imported Map.js into App.js.
Issue #1-
At first, I did not import the React (with R in upper-case) package into the App.js script but I imported Map into App.js, and normally, I installed the React package in Map.js. However, it threw this error-
'React' must be in scope when using JSX react/react-in-jsx-scope
Then, I again, injected React into App.js to circumvent the issue (with no logic behind it). It was not showing the jsx error anymore but it created another problem, issue #2-
Module not found: Can't resolve 'Map.js' in 'D:\Workflow\Own\React_apps_GIS\reactmb\react_arc\src
Here, the module couldn't be found, which is a scripting error. I checked it but could not find any but there is obviously a problem. I am seeking the community's help. I am posting the complete Map.js script below:
Code:
import React ,{useRef,useEffect} from 'react'
import {loadModules} from "esri-loader"
import MapView from esri/views/MapView;
import WebMap from esri/WebMap;
function Map() {
const MapEl=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:[88.414, 22.5805],
zoom: 11,
//here, useRef=container
container:MapEl.current
})
})
return()=>{
//close the map view if nothing in the view
if(!!view){
view.destroy()
view=null
}
}
})
return (
//refers to the div style
<div style={{height:500}} ref={MapEl}>
</div>
)
}
export default Map
Packages:
{
"name": "react_arc",
"version": "0.1.0",
"private": true,
"dependencies": {
"arcgis-js-api": "^4.24.5",
"esri-loader": "^3.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "^2.1.3",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
