Can I use a URL as import (ESM / ES Modules)?

[gavinr]

When I try to import via url, like this:

import MapView from "https://js.arcgis.com/4.22/@arcgis/core/views/MapView.js";

... I get an error: ESModules url imports are only supported in the experimental ESModule preset.

I thought this could be resolved by setting "type": "module", in the package.json, but that does not seem to work:
https://codesandbox.io/s/arcgis-js-api-esm-and-react-via-cdn-template-3zfpc?file=/src/EsriMap.js

I'm found this PR: #5821, but no documentation on if this import style is supported in codesandbox. I would love to see a documentation page similar to this one for codepen.

[JamesACS]

Hey @gavinr - Do you have a link to the Sandbox in question?

Regarding the documentation - we're actually working on improving ours at the moment so I'll add that to the list!

[JamesACS]

Thanks @gavinr - I'm looking into this and will let you know when I have any updates

[JamesACS]

Hey @gavinr - So it turns out this only works within the esm-react environment. If you try the same using this template if should work: https://codesandbox.io/s/framer-modules-x-codesandbox-cddvg?file=/src/App.jsx

[gavinr]

Thanks! I got it to work:
https://codesandbox.io/s/arcgis-js-api-esm-and-react-via-cdn-template-t3v0fr?file=/src/EsriMap.jsx
(https://gavinr.com/arcgis-js-api-es-modules-cdn-url/)

[JamesACS]

Great news!

[husayt]

Hi @gavinr, can you please share how did you make it work? I have compared both your original (non working) and working version. But couldn't figure out what made it to work

[pixelass]

If anyone is ever looking for a simple demo, here you go: (using the confetti demo from skypack)

• plain JS: https://codesandbox.io/s/skypack-demo-hh8usr
• html with JS: https://codesandbox.io/s/skypack-html-10tbc4