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

Anirban_Banerjee — Tue, 05 Jul 2022 12:01:58 GMT

(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>

)

}

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?

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

AndyGup — Tue, 05 Jul 2022 14:42:28 GMT

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.

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

Anirban_Banerjee — Fri, 08 Jul 2022 11:26:37 GMT

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?

topic Re: React-based compilation error (Module not found and JSX related) in ArcGIS JavaScript Maps SDK Questions

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

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

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