Using requirejs with ArcGIS API for JavaScript v 4 API from CDN?

Question

ArcGIS API for JavaScript Quick Start guides show "all-in-a-single-html" approach which is good for examples. However how about bigger apps?

I added comment on older issue (closed) at https://github.com/Esri/jsapi-resources/issues/32.

That works on 4.0, but I have requirejs import errors with the latest version today - 4.12:

Script error for "@dojo/framework/shim/Promise", needed by: esri/views/MapView
Script error for "@dojo/framework/shim/AbortController", needed by: esri/core/promiseUtils
Script error for "@dojo/framework/shim/array", needed by: esri/PopupTemplate
Script error for "@dojo/framework/shim/Set", needed by: esri/PopupTemplate
Script error for "@dojo/framework/shim/Map", needed by: esri/core/Evented
Script error for "@dojo/framework/shim/global", needed by: esri/request
Script error for "@dojo/framework/shim/WeakMap", needed by: esri/intl/date, esri/intl/number
Script error for "maquette", needed by: esri/views/overlay/ViewOverlay
Script error for "maquette-css-transitions", needed by: esri/widgets/support/widgetUtils
Script error for "maquette-jsx", needed by: esri/widgets/support/jsxFactory

I mean these require.config paths work on 4.0, but do not work on 4.12

paths: {
      'esri': 'https://js.arcgis.com/4.0/esri',
      'dojo': 'https://js.arcgis.com/4.0/dojo',
      'dojox': 'https://js.arcgis.com/4.0/dojox',
      'dijit': 'https://js.arcgis.com/4.0/dijit',
      'moment': 'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0' // To resolve Script error for "moment/moment", needed by: esri/plugins/moment
    }

Repo with sample files for both version is at https://github.com/r-pankevicius/arcgis-js-api-with-requirejs

Answer 1

Some of the issues are in your error. You're missing the requirejs configs for the @dojo and maquette modules. You can get an idea of what these might look like by looking at how we set up workers to load from the CDN in webpack builds like in this demo

Here is what a requirejs config would look like.

require.config({
    paths: {
        'esri': 'https://js.arcgis.com/4.12/esri',
        'dojo': 'https://js.arcgis.com/4.12/dojo',
        'dojox': 'https://js.arcgis.com/4.12/dojox',
        'dijit': 'https://js.arcgis.com/4.12/dijit',
        '@dojo': 'https://js.arcgis.com/4.12/@dojo',
        'cldrjs': 'https://js.arcgis.com/4.12/cldrjs/dist/cldr',
        'globalize': 'https://js.arcgis.com/4.12/cldrjs/dist/globalize/dist/globalize',
        'maquette': 'https://js.arcgis.com/4.12/maquette/dist/maquette.umd',
        'maquette-css-transitions': 'https://js.arcgis.com/4.12/maquette-css-transitions/dist/maquette-css-transitions.umd',
        'maquette-jsx': 'https://js.arcgis.com/4.12/maquette-jsx/dist/maquette-jsx.umd',
        'moment': 'https://js.arcgis.com/4.12/moment',
        'tslib': 'https://js.arcgis.com/4.12/tslib/tslib',
    }
});

You can find a working demo here.

It's still very slow though, because requirejs will not take advantage of the built layer files in the CDN.