Setting up codesandbox with @arcgis/core

2162
11
Jump to solution
04-15-2021 11:23 AM
SethLutske
New Contributor III

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.
 
 
What simple thing am I missing here? 
0 Kudos
1 Solution

Accepted Solutions
ReneRubalcava
Frequent Contributor

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

View solution in original post

11 Replies
ReneRubalcava
Frequent Contributor

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

SethLutske
New Contributor III

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 🍺

LaurynasGedminas2
Occasional Contributor

I try in codeSanbox and I get:

LaurynasGedminas2_0-1618582581255.png

 

0 Kudos
SethLutske
New Contributor III

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 

LaurynasGedminas2
Occasional Contributor

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

0 Kudos
SethLutske
New Contributor III

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.

ReneRubalcava
Frequent Contributor

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

0 Kudos
LaurynasGedminas2
Occasional Contributor

Cool, thank you,

gives error:

LaurynasGedminas2_0-1618588385857.png

 

0 Kudos
PatrickMcKinney99
Occasional Contributor

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?  
 
0 Kudos