nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Load AMD modules in ES6 way.

EvelynHernandez

Hello,

I want to ask how to set up the environment to load AMD modules from Arcgis JS Api 4 or 3.17 in a ES6 way.

Cuz i want to use react as a framework.

I have been seeing for some examples but i still dont understand too well how to do it from 0. (I already see some examples that odoenet site gives and nazarewk/dojo-jsx have in github)

I want to use gulp and webpack dev server.

Thanks for all ur help !

Find more posts tagged with

Accepted answers

TomWayson

If the discussion in this GitHub issue helped you resolve the problems you had getting esri modules to load from ES6 code, would you mind making this question as answered?

Thanks!

All comments

TomWayson

I haven't looked in detail at your above code, but have you looked into the way these repos use the ArcGIS API for JavaScript with webpack?

React/webpack/typescript: GitHub - dcworldwide/esri-webpack: Demo app to build typescript apps using ESRI's JSAPI with webpack
forked from (no react): GitHub - lobsteropteryx/esri-webpack: Demo app to build typescript apps using ESRI's JSAPI with webpack
Angular2 webpack: GitHub - tomwayson/angular2-esri-example: Example app using the ArcGIS API for JavaScript v3 in an Angular2 app

Essentially they:

There's some good discussion of (the apparent lack of) any limitations to this approach: Question: Any limitations? · Issue #2 · lobsteropteryx/esri-webpack · GitHub

Generally speaking, when writing ArcGIS API for JavaScript apps in ES6, I'd say that you are not "loading AMD modules in an ES6 way." Instead you writing ES6 modules and transpilling them into AMD modules that can be loaded by Dojo. In my experience, I've had the most success w/ approaches that exclude the Esri / Dojo from your local build and just output code to AMD that can be loaded by the CDN hosted ArcGIS API for JavaScript. I have another example that uses Rollup instead of webpack, but it's exact the same idea:

GitHub - tomwayson/esri-rollup-example: Example application using Rollup to bundle local ES2015 modules that use CDN hos…

HTH

EvelynHernandez

Rene,

I still dont understand too much how to incorporate some modules that the arcgis js api has.

For example, i want to use the Search that this example shows: ArcGIS API for JavaScript Sandbox

How i said, im developing a webapp using the following setup:

React JS as framework.

Webpack as server, my config file is the following:

<SPAN class="keyword token">var</SPAN> path <SPAN class="operator token">=</SPAN> <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'path'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
module<SPAN class="punctuation token">.</SPAN>exports <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
 entry<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
 login<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'./static/js/bundles/login.js'</SPAN><SPAN class="punctuation token">,</SPAN>
 dashboard<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'./static/js/bundles/dashboard.js'</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
 output<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
 path<SPAN class="punctuation token">:</SPAN> path<SPAN class="punctuation token">.</SPAN><SPAN class="token function">join</SPAN><SPAN class="punctuation token">(</SPAN>path<SPAN class="punctuation token">.</SPAN><SPAN class="token function">join</SPAN><SPAN class="punctuation token">(</SPAN>__dirname<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'dist'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'js'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>
 filename<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'[name].js'</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
 devServer<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
 inline<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
 port<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">443</SPAN><SPAN class="punctuation token">,</SPAN>
 host<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"127.0.0.1"</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
 module<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
 loaders<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>
 <SPAN class="punctuation token">{</SPAN>
 test<SPAN class="punctuation token">:</SPAN> <SPAN class="regex token">/\.(js|jsx)$/</SPAN><SPAN class="punctuation token">,</SPAN>
 exclude<SPAN class="punctuation token">:</SPAN> <SPAN class="regex token">/node_modules/</SPAN><SPAN class="punctuation token">,</SPAN>
 loader<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'babel'</SPAN><SPAN class="punctuation token">,</SPAN>
 query<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
 presets<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">'react'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'es2015'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'stage-2'</SPAN><SPAN class="punctuation token">]</SPAN>
 <SPAN class="punctuation token">}</SPAN>
 <SPAN class="punctuation token">}</SPAN>
 <SPAN class="punctuation token">]</SPAN>
 <SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

gulp as task manager that doest this:

<SPAN class="keyword token">var</SPAN> gulp <SPAN class="operator token">=</SPAN> <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'gulp'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> sass <SPAN class="operator token">=</SPAN> <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'gulp-sass'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> swig <SPAN class="operator token">=</SPAN> <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'gulp-swig'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> notify <SPAN class="operator token">=</SPAN> <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"gulp-notify"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="keyword token">function</SPAN> <SPAN class="token function">defaultError</SPAN><SPAN class="punctuation token">(</SPAN>type<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
 <SPAN class="keyword token">return</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>err<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
 console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>type <SPAN class="operator token">+</SPAN> <SPAN class="string token">' error : '</SPAN> <SPAN class="operator token">+</SPAN> err<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="keyword token">function</SPAN> <SPAN class="token function">dist</SPAN><SPAN class="punctuation token">(</SPAN>path<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
 <SPAN class="keyword token">return</SPAN> <SPAN class="string token">'./dist/'</SPAN> <SPAN class="operator token">+</SPAN> path<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="keyword token">function</SPAN> <SPAN class="token function">realPath</SPAN><SPAN class="punctuation token">(</SPAN>xs<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
 <SPAN class="keyword token">return</SPAN> <SPAN class="string token">'./static/'</SPAN> <SPAN class="operator token">+</SPAN> xs<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="keyword token">var</SPAN> reportError <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>error<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
 <SPAN class="token function">notify</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
 title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'Gulp Task Error'</SPAN><SPAN class="punctuation token">,</SPAN>
 message<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'Check the console.'</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">write</SPAN><SPAN class="punctuation token">(</SPAN>error<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>error<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toString</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">emit</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'end'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
gulp<SPAN class="punctuation token">.</SPAN><SPAN class="token function">task</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'sass'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
 <SPAN class="keyword token">return</SPAN> gulp<SPAN class="punctuation token">.</SPAN><SPAN class="token function">src</SPAN><SPAN class="punctuation token">(</SPAN>'<SPAN class="punctuation token">.</SPAN><SPAN class="operator token">/</SPAN><SPAN class="keyword token">static</SPAN><SPAN class="operator token">/</SPAN>css<SPAN class="comment token">/*.scss')
 .pipe(sass({ outputStyle: 'compact' }))
 .on('error', reportError)
 .pipe(gulp.dest(dist('css')))
});
gulp.task('css', function(){
 return gulp.src('./static/css/*.css')
 .pipe(sass({ outputStyle: 'compact' }))
 .on('error', reportError)
 .pipe(gulp.dest(dist('css')))
});
gulp.task('templates', function(){
 return gulp.src(['./*.html','!./base.html'])
 .pipe(swig())
 .pipe(gulp.dest('dist/templates'));
});
gulp.task('libs', function(){
 return gulp.src('./static/js/vendor/*.js')
 .pipe(gulp.dest(dist('js/vendor')));
});
gulp.task('fonts', function(){
 return gulp.src('./static/css/fonts/*.ttf')
 .on('error', reportError)
 .pipe(gulp.dest(dist('css/fonts')))
});
gulp.task('images', function(){
 return gulp.src('./static/css/images/**/</SPAN><SPAN class="operator token">*</SPAN><SPAN class="punctuation token">.</SPAN>png'<SPAN class="punctuation token">)</SPAN>
 <SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'error'</SPAN><SPAN class="punctuation token">,</SPAN> reportError<SPAN class="punctuation token">)</SPAN>
 <SPAN class="punctuation token">.</SPAN><SPAN class="token function">pipe</SPAN><SPAN class="punctuation token">(</SPAN>gulp<SPAN class="punctuation token">.</SPAN><SPAN class="token function">dest</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">dist</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'css/images'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
gulp<SPAN class="punctuation token">.</SPAN><SPAN class="token function">task</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'html'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
 <SPAN class="keyword token">return</SPAN> gulp<SPAN class="punctuation token">.</SPAN><SPAN class="token function">src</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'*.html'</SPAN><SPAN class="punctuation token">)</SPAN>
 <SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'error'</SPAN><SPAN class="punctuation token">,</SPAN> reportError<SPAN class="punctuation token">)</SPAN>
 <SPAN class="punctuation token">.</SPAN><SPAN class="token function">pipe</SPAN><SPAN class="punctuation token">(</SPAN>gulp<SPAN class="punctuation token">.</SPAN><SPAN class="token function">dest</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">dist</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">''</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
gulp<SPAN class="punctuation token">.</SPAN><SPAN class="token function">task</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'js'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
 <SPAN class="keyword token">return</SPAN> gulp<SPAN class="punctuation token">.</SPAN><SPAN class="token function">src</SPAN><SPAN class="punctuation token">(</SPAN>'<SPAN class="punctuation token">.</SPAN><SPAN class="operator token">/</SPAN><SPAN class="keyword token">static</SPAN><SPAN class="operator token">/</SPAN>js<SPAN class="operator token">/</SPAN>vendor<SPAN class="comment token">/**/</SPAN><SPAN class="operator token">*</SPAN><SPAN class="punctuation token">.</SPAN>js'<SPAN class="punctuation token">)</SPAN>
 <SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'error'</SPAN><SPAN class="punctuation token">,</SPAN> reportError<SPAN class="punctuation token">)</SPAN>
 <SPAN class="punctuation token">.</SPAN><SPAN class="token function">pipe</SPAN><SPAN class="punctuation token">(</SPAN>gulp<SPAN class="punctuation token">.</SPAN><SPAN class="token function">dest</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">dist</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">''</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
gulp<SPAN class="punctuation token">.</SPAN><SPAN class="token function">task</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'watch'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
 gulp<SPAN class="punctuation token">.</SPAN><SPAN class="token function">watch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>'css<SPAN class="comment token">/**/</SPAN><SPAN class="operator token">*</SPAN><SPAN class="punctuation token">.</SPAN>scss<SPAN class="string token">'].map(realPath), ['</SPAN>sass'<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 gulp<SPAN class="punctuation token">.</SPAN><SPAN class="token function">watch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="string token">'*.html'</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">'templates'</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

gulp<SPAN class="punctuation token">.</SPAN><SPAN class="token function">task</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'default'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">'sass'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'templates'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'libs'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'fonts'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'images'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'watch'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'css'</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">'html'</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

And my package.json file contains this.

<SPAN class="punctuation token">{</SPAN>
 <SPAN class="string token">"name"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"myprojectname"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"version"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"1.0.0"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"description"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"For next project."</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"main"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"server.js"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"scripts"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
 <SPAN class="string token">"start"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"start npm run dev:server & start npm run gulp"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"dev:server"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"webpack-dev-server"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"dev:build"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"webpack --progress --colors"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"prod:build"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"webpack --optimize-minimize --progress --colors"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"gulp"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"gulp"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"test"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"echo \"Error: no test specified\" && exit 1"</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"repository"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
 <SPAN class="string token">"type"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"git"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"url"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"..."</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"author"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"license"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"ISC"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"bugs"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
 <SPAN class="string token">"url"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"..."</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"homepage"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"...#readme"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"dependencies"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
 <SPAN class="string token">"highcharts"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"~4.2.4"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"lodash"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"~4.15.0"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"react"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"^0.14.7"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"react-data-grid"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"~0.14.18"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"react-dom"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"^0.14.7"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"griddle-react"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"~0.4.1"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"react-native"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"~0.24.1"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"jspdf"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"~1.2.61"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"jspdf-autotable"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"~2.0.25"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"cookie-handler"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"~1.0.1"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"redux"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"~3.5.2"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"react-select"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"~1.0.0-beta13"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"rutjs"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"~0.1.1"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"react-image-gallery"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"~0.6.4"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"babel-plugin-transform-decorators-legacy"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"~1.3.4"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"validator"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"~5.5.0"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"react-bootstrap-modal"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"~2.1.0"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"react-modal"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"~1.4.0"</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"devDependencies"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
 <SPAN class="string token">"babel-core"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"^6.6.5"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"babel-loader"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"^6.2.4"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"babel-preset-es2015"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"^6.6.0"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"babel-preset-react"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"^6.5.0"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"babel-preset-stage-2"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"^6.5.0"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"babelify"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"^7.2.0"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"browserify"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"^13.0.0"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"gulp"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"^3.9.1"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"gulp-notify"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"~2.2.0"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"gulp-sass"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"^2.2.0"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"gulp-swig"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"^0.8.0"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"node-sass"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"^3.4.2"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"react-tabs"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"^0.5.3"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"webpack"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"^1.12.14"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"webpack-dev-server"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"^1.14.1"</SPAN><SPAN class="punctuation token">,</SPAN>
 <SPAN class="string token">"react-bootstrap"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"~0.30.0"</SPAN>
 <SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

In the module that im working i want to load the arcgis api features like search, map like this:

import Search from 'esri/dijit/Search'

The way im doing it now is using the legacy code for all of the developing im working.

For example when i implement Dynamic layers i need to write in this way (and it works).

<SPAN class="keyword token">var</SPAN> layerD <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">esri<SPAN class="punctuation token">.</SPAN>layers<SPAN class="punctuation token">.</SPAN>ArcGISDynamicMapServiceLayer</SPAN><SPAN class="punctuation token">(</SPAN>layers<SPAN class="punctuation token">.</SPAN><SPAN class="token function">read_direccionesDyn</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="punctuation token">{</SPAN>id<SPAN class="punctuation token">:</SPAN><SPAN class="string token">"factigis_d"</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
layerD <SPAN class="punctuation token">.</SPAN><SPAN class="token function">setImageFormat</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"png32"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
layerD <SPAN class="punctuation token">.</SPAN><SPAN class="token function">setVisibleLayers</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
mapp<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addLayer</SPAN><SPAN class="punctuation token">(</SPAN>layerD <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

But for example when i want to write the legacy code for the Search showed in the example,

<SPAN class="keyword token">var</SPAN> search <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">esri<SPAN class="punctuation token">.</SPAN>dijit<SPAN class="punctuation token">.</SPAN>Search</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>map<SPAN class="punctuation token">:</SPAN> mapp<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"search"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
search<SPAN class="punctuation token">.</SPAN><SPAN class="token function">startup</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

it gives me an error saying "Uncaught TypeError: esri.dijit.Search is not a constructor".

If i put: dojo.require(esri.dijit.Search) is says "multiple define".

Im pretty new on developing in this way , and I have been reading all the guides u guys gave me but im still very confused on how to fix my problem loading the esri modules with the setup that i have.

My html is this one: and there i show where i put the arcgis js api

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>html</SPAN> <SPAN class="attr-name token">lang</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>es<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
 <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>head</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
 <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>meta</SPAN> <SPAN class="attr-name token">charset</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>utf-8<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">name</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>viewport<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">content</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>width<SPAN class="punctuation token">=</SPAN>device-width, initial-scale<SPAN class="punctuation token">=</SPAN>1, maximum-scale<SPAN class="punctuation token">=</SPAN>1, user-scalable<SPAN class="punctuation token">=</SPAN>no<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="punctuation token">></SPAN></SPAN>
 <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>link</SPAN> <SPAN class="attr-name token">rel</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>shortcut icon<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">href</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
 <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>title</SPAN><SPAN class="punctuation token">></SPAN></SPAN>GISRED - FactiGIS FRONTOFFICE<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>title</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
 <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>link</SPAN> <SPAN class="attr-name token">rel</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>stylesheet<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>text/css<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">href</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>arcgis_js_api/library/3.16/3.16/dijit/themes/tundra/tundra.css<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="punctuation token">/></SPAN></SPAN>
 <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>link</SPAN> <SPAN class="attr-name token">rel</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>stylesheet<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>text/css<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">href</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>arcgis_js_api/library/3.16/3.16/esri/css/esri.css<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="punctuation token">/></SPAN></SPAN>
 <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>link</SPAN> <SPAN class="attr-name token">rel</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>stylesheet<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">href</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>static/js/vendor/bootstrap.min.css<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="punctuation token">/></SPAN></SPAN>
 <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>link</SPAN> <SPAN class="attr-name token">rel</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>stylesheet<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">href</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>static/js/vendor/font-awesome/css/font-awesome.min.css<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="punctuation token">/></SPAN></SPAN>
 <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>link</SPAN> <SPAN class="attr-name token">rel</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>stylesheet<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>text/css<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">href</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>dist/css/factigis.css<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="punctuation token">/></SPAN></SPAN>
 <SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>static/js/vendor/jspdf/jspdf.min.js<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>
 <SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>static/js/vendor/jspdf/jspdf.plugin.autotable.js<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>
 <SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>static/js/vendor/jspdf/faker.min.js<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>
 <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>link</SPAN> <SPAN class="attr-name token">rel</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>stylesheet<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">href</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>dist/css/react-select.css<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>head</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
 <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>body</SPAN> <SPAN class="attr-name token">class</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>bodyfactigis<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
 <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>myFactigis_FrontOffice<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">class</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>myFactigis_FrontOffice<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
 <SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN> <SPAN class="attr-name token">type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>text/javascript<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>arcgis_js_api/library/3.16/3.16/init.js<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>
 <SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>static/js/vendor/jquery.min.js<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>
 <SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>static/js/vendor/lodash.core.js<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>
 <SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>static/js/vendor/jQueryRotate.js<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>
 <SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>factigisFrontoffice.js<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>body</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>html</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

I hope u guys that understand more than me about this could guide me, i really want to use the complete arcgis js api in my app without changing the way im working too much.

Thanks in advice! 😞

EvelynHernandez

Im going to try them and see.

RRubalcava

For a little more clarification, you can basically write your JavaScript in ES6, using ES6 modules and more as you normally would. The key is to let the babel transpiler know you want to compile is as AMD modules, rather than commonjs. Other than that small detail, there really isn't much else to it.

RRubalcava

Here is a sample using React with 4.0beta3, but everything is still pretty much the same.

GitHub - odoe/esrijs4-vm-react: Using ErsiJS 4.0 View Models with React

This is using Gulp, but not Webpack. If you really want to use Webpack, you can check out this repo for the dojo-webpack-loader

GitHub - Nordth/dojo-webpack-loader: Webpack loader for Dojo Toolkit 1.x

I haven't used it, but it might be what you're looking for.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.