topic Re: Setting up codesandbox with @arcgis/core in ArcGIS JavaScript Maps SDK Questions

Setting up codesandbox with @arcgis/core

SethLutske — Thu, 15 Apr 2021 18:25:22 GMT

I'm trying to set up a simple template using codesandbox to be able to spin up arcgis js api maps quickly. I dont like codepen as much as codesandbox. I'd like to do it with the newer es6 module imports. I added @Anonymous User/core to the dependencies, and in my js file I have this:

import Map from "@arcgis/core/Map"; import MapView from "@arcgis/core/views/MapView"; import "@arcgis/core/assets/esri/themes/dark/main.css"; const map = new Map({ basemap: "dark-grey" }); const view = new MapView({ map, container: "viewDiv", zoom: 4, center: [15, 65] });

Unfortunately I'm getting the error:

Cannot read property 'zoomIn' of null

I tried using the `ncp` script under the copy assets section of the docs , but that makes no difference. If you close the error overlay, you can see that the map container does seem to render, but no map is in there.

Here is the codesandbox in question

What simple thing am I missing here?

Re: Setting up codesandbox with @arcgis/core

ReneRubalcava — Thu, 15 Apr 2021 18:47:30 GMT

The vanilla JS project for codesandbox uses parcel, and there is currently an open issue with parcel-bundler about errors loading the API with Parcel. So it's probably not going to work with that template.

If you just want to do some testing, you can use ESM via the CDN as described here.

https://developers.arcgis.com/javascript/latest/install-and-set-up/#es-modules-via-cdn

Re: Setting up codesandbox with @arcgis/core

SethLutske — Thu, 15 Apr 2021 18:56:15 GMT

Amazing, thank you. I had a feeling it had to do with parcel bundler - I'll import straight from the CDN. Thanks for the quick reply. Also I'm a huge fan 🍺

Re: Setting up codesandbox with @arcgis/core

LaurynasGedminas2 — Fri, 16 Apr 2021 14:16:41 GMT

I try in codeSanbox and I get:

Re: Setting up codesandbox with @arcgis/core

SethLutske — Fri, 16 Apr 2021 14:22:38 GMT

I had the same issue. CSB or parcel doesn't seem to understand we're trying to import from a remote url, not a node module. Rather than spend too much time on that, I made a static sandbox that I'm now using as a template. Feel free to fork it:

Static Codesandbox: ArcGIS JS API template using @arcgis/core modules

Re: Setting up codesandbox with @arcgis/core

LaurynasGedminas2 — Fri, 16 Apr 2021 15:26:17 GMT

building new one here: https://codesandbox.io/s/esri-react-test1-ji744?file=/src/App.js

it allows to add '@arcgis/code' as dependancy, but errors out

Re: Setting up codesandbox with @arcgis/core

SethLutske — Fri, 16 Apr 2021 15:41:25 GMT

You are trying to import an arcgis/core Map component as a react component. These are not react components. You either need to build your own react components from the arcgis js api components, or use react-arcgis . There are lots of tutorials out there on how to use the arcgis js api with react.

Re: Setting up codesandbox with @arcgis/core

ReneRubalcava — Fri, 16 Apr 2021 15:44:40 GMT

The "Map" from the API is not a React component, you can't use it as one. Here is a working sandbox using the API and React.

https://codesandbox.io/s/esri-react-test1-forked-bdpsy

Re: Setting up codesandbox with @arcgis/core

LaurynasGedminas2 — Fri, 16 Apr 2021 15:53:19 GMT

Cool, thank you,

gives error:

Re: Setting up codesandbox with @arcgis/core

PatrickMcKinney99 — Fri, 20 May 2022 19:59:23 GMT

I am also getting an error when running "parcel build" using the @arcgis/core package. I'm using version

2.5.0 of parcel. Any tricks to get the build command to work with parcel?

Re: Setting up codesandbox with @arcgis/core

ReneRubalcava — Fri, 20 May 2022 21:19:56 GMT

Currently, no. There is no fix.

But, based on this comment here, this will work in an upcoming release of Parcel, so eventually should work in codesandbox down the road.

Re: Setting up codesandbox with @arcgis/core

PatrickMcKinney99 — Thu, 26 May 2022 15:39:55 GMT

I can confirm that by using the @parcel/bundler-experimental and versions of @parcel/core and parcel mentioned on the GitHub issue, I was able to generate a build in parcel.js using ESM modules and JS API.