How to do use dynamic Import() wth Typescript

BrianHennessey1

I am using the webpack plugin (GitHub - Esri/arcgis-webpack-plugin: Webpack plugin for the ArcGIS API for JavaScript ) and the resulting webpack bundle of my app is over 2.5mb. I am trying to reduce its size by doing dynamic Imports().

What am I doing wrong here? I get a 'default' constructor which I cannot instantiate.

RRubalcava

This has to do with how we currently export modules in the JSAPI and the tsconfig.json "esModuleInterop": true that does some default helpers. You can see how this impacts dynamic imports here.

You can update your code like this to make it easier to work with.

<SPAN class="keyword token">import</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"esri/tasks/GeometryService"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">default</SPAN><SPAN class="punctuation token">:</SPAN> GeometryService <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
  <SPAN class="keyword token">const</SPAN> geomService <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">GeometryService</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> url <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>