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.

[ReneRubalcava · Accepted solution]

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.

import("esri/tasks/GeometryService").then(({ default: GeometryService }) => {
  const geomService = new GeometryService({ url });
});‍‍‍

[BradBarnell]

Is there a way to dynamically import more than one module at a time?