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:
Solved! Go to Solution.
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
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
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 🍺
I try in codeSanbox and I get:
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
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
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.
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.
Cool, thank you,
gives error: