How to do use dynamic Import() wth Typescript

268
1
Jump to solution
10-25-2019 05:57 AM
BrianHennessey1
New Contributor II

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.

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
ReneRubalcava
Frequent Contributor

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 });
});

View solution in original post

1 Reply
ReneRubalcava
Frequent Contributor

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 });
});