Hello
I am setting up ArcGIS Maps SDK for a simple (for now) app I am making using React. Right now all I have done is follow the setup tutorial by using npm to install @ArcGIS/map-components-react, right now just using ArcgisMap, ArcgisSearch, and ArcgisLegend in the root rendering component. In other words, this should be pretty simple but it seems like there's some issue with the ArcGIS dependency as I am getting the follwoing error, which happens when the page loads the map component after which the zoomed in map location acts erratically or the map simply moves down out of view, tracing back only to what seems like node modules folders for the arcgis library:
[esri.views.webgl.FramebufferObject] Resizing FBO attachment size 3132x226044 to device limit 16384
Uncaught TypeError: Cannot destructure property 'spans' of 'g' as it is null.
at m._renderBackgroundLayers (VectorTileContainer.js:5:1)
at m._doRender (VectorTileContainer.js:5:1)
at m.renderChildren (VectorTileContainer.js:5:1)
at m.doRender (Container.js:5:1)
at m.doRender (VectorTileContainer.js:5:1)
at m.processRender (DisplayObject.js:5:1)
at h.renderChildren (Container.js:5:1)
at h.doRender (Container.js:5:1)
at h.processRender (DisplayObject.js:5:1)
at q._renderChildren (Stage.js:5:1)
The setup tutorial:
https://developers.arcgis.com/javascript/latest/get-started-react/
It is worth noting a similar question has been asked before for Angular:
However I am not an expert on React and have tried playing around with the component to see how I can do something equivalent but have had no complete luck, the farthest I've gotten was have the error appear later with a completely zoomed out map.
The code (react file and html file):
import React from "react";
import ReactDOM from "react-dom/client";
import { ArcgisMap, ArcgisSearch, ArcgisLegend } from "@arcgis/map-components-react";
// import defineCustomElements to register custom elements with the custom elements registry
import { defineCustomElements as defineMapElements } from "@arcgis/map-components/dist/loader";
defineMapElements(window, { resourcesUrl: "https://js.arcgis.com/map-components/4.30/assets" });
const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(
<React.StrictMode>
<ArcgisMap
itemId="d5dda743788a4b0688fe48f43ae7beb9"
onArcgisViewReadyChange={(event: any) => {
console.log("MapView ready", event);
}}
>
<ArcgisSearch position="top-right"></ArcgisSearch>
<ArcgisLegend position="bottom-left"></ArcgisLegend>
</ArcgisMap>
</React.StrictMode>
);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<arcgis-map item-id="e691172598f04ea8881cd2a4adaa45ba">
</arcgis-map>
<script type="module" src="../src/index.js"></script>
</div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
Appreciate it if I could get some insight on either what I might be missing or what about the ArcGIS imports I need to work around
Thanks
Solved! Go to Solution.
Hi @aerhart, the continuous scrolling is likely because you are missing the right CSS. We have an open issue to update the doc to include the CSS. Here's a working example, try running this: https://github.com/Esri/jsapi-resources/tree/main/component-samples/map-components/samples/react.
And here's the sample's CSS:
@import 'https://js.arcgis.com/4.30/@arcgis/core/assets/esri/themes/dark/main.css';
#root,
html,
body,
arcgis-map {
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
}
Hi @aerhart, the continuous scrolling is likely because you are missing the right CSS. We have an open issue to update the doc to include the CSS. Here's a working example, try running this: https://github.com/Esri/jsapi-resources/tree/main/component-samples/map-components/samples/react.
And here's the sample's CSS:
@import 'https://js.arcgis.com/4.30/@arcgis/core/assets/esri/themes/dark/main.css';
#root,
html,
body,
arcgis-map {
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
}
Indeed, this was a large part of the issue, thanks @AndyGup. Also was not using Vite or any extra build tools but the exported folder from that provided link lead me in the right direction.