Select to view content in your preferred language

React-based compilation error (Module not found and JSX related)

1027
2
07-05-2022 05:01 AM
Anirban_Banerjee
New Contributor II

(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/core": "^4.24.5",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "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"
    ]
  }
}
@AndyGup, your suggestions?
0 Kudos
2 Replies
AndyGup
Esri Regular Contributor

Hi @Anirban_Banerjee we recommend using ES modules "@arcgis/core" with new React projects rather than esri-loader. Here is a working example: https://github.com/Esri/jsapi-resources/tree/master/esm-samples/jsapi-create-react-app

0 Kudos
Anirban_Banerjee
New Contributor II

Thanks, Andy. I was going to try it out but I inserted './' before Map.js. Then, it worked. Care to shed light on the logic?

0 Kudos