referencing an amd module(arcgis) in webpack app

Question

I'm building a react app with webpack and i need to incorporate arcgis maps into a react component. I have know idea how to bring this into my project. I've tried creating an arcgis directory with an index.js of the built javascript and trying to reference that:

import {Map} from 'arcgis/index'

That doesn't work. I then just tried to include the css/js script tags directly into my index.html but when I try to require them, like in the example, webpack obviously can't find them. Is there some way to tell webpack to ignore require calls in my src file so it gets handled by the browser? I'm trying and failing at doing the following:

import React from 'react'

export default class EsriMap extends React.Component {
    componentDidMount() {
        const _this = this

        require(["esri/map", "dojo/domReady!"], function(Map) {
          var map = new Map(_this.refs.map, {
            center: [-118, 34.5],
            zoom: 8,
            basemap: "topo"
          });
        });
    }

    render() {
        return (
            <div ref="map"></div>
        )
    }
}

What does webpack do with this inner require? Maybe try dojo.require to trick webpack into ignoring it? — Corey Alix, May 07 '16 at 21:32

score 1 · Answer 1 · answered Nov 14 '16 at 04:38

You may want to try this https://github.com/tomwayson/esri-webpack-babel .

This method is nice because it doesn't bog down the build. You pull in the ESRI Api from the CDN, and tell webpack that it's an external.

//Add this...
externals: [
 // Excludes any esri or dojo modules from the bundle.
 // These are included in the ArcGIS API for JavaScript, 
 // and its Dojo loader will pull them from its own build output
  function (context, request, callback) {
    if (/^dojo/.test(request) ||
        /^dojox/.test(request) ||
        /^dijit/.test(request) ||
        /^esri/.test(request)
    ) {
      return callback(null, "amd " + request);
    }
    callback();
  }
],
//And this to you output config
output: {
  libraryTarget: "amd"
},

When your app loads you bootstrap you webpack modules using Dojo in a script tag.

<!-- 1. Configure and load ESRI libraries -->
<script>
    window.dojoConfig = {
        async: true
    };
</script>
<script src="https://js.arcgis.com/4.1/"></script>

<!-- Load webpack bundles-->
<script>
    require(["Angular/dist/polyfills.bundle.js", "Angular/dist/vendor.bundle.js", "Angular/dist/app.bundle.js"], function (polyfills, vendor, main) { });
</script>

I've got it working with an Angular 2 App I'm working on. The only downside is I haven't yet got the unit tests to run right using Karma. I've only been working on that a few hours now.. Hope to have a solution to the testing issue soon.

score 0 · Answer 2 · edited May 23 '17 at 12:24

0

@getfuzzy's answer will work well as long as you don't need to lazy load the ArcGIS API (say for example only on a /map route).

For that you will want to take the approach I describe in this answer

This blog post explains why you need to use one of these two approaches and explains how they work as well as the pros/cons of each.

edited May 23 '17 at 12:24

Community

1
1

answered Dec 06 '16 at 04:48

Tom Wayson

1,187
1
12
21

score -1 · Answer 3 · answered May 06 '16 at 12:30

-1

I think you can try using bower version of esrijsapi. Doc link

answered May 06 '16 at 12:30

mchepurnoy

158
7

You cannot use webpack to directly load modules from the bower distribution of the ArcGIS API. This [blog post](http://tomwayson.com/2016/11/27/using-the-arcgis-api-for-javascript-in-applications-built-with-webpack/) explains why. – Tom Wayson Dec 06 '16 at 04:59
Thanks, Tom. Great post! I will try your solutions in my projects. – mchepurnoy Dec 06 '16 at 12:23

referencing an amd module(arcgis) in webpack app

3 Answers3