Fails to bundle modules with dynamic imports

[ben]

I'm submitting a feature request

• Library Version:
  1.0.0-beta.15

Please tell us about your environment:

• Operating System:
  Windows 10

• Node Version:
  10.15.0

• NPM Version:
  6.4.1

• Browser:
  Chrome XX

• Language:
  TypeScript 3.3

• Loader/bundler:
  SystemJS

Current behavior:

Fails to bundle modules which use dynamic imports (amcharts4 is the problematic library)

ERROR [BundledSource] Could not convert to AMD module, skipping D:\dev\stock-screener-client\node_modules\@amcharts\amcharts4\.internal\core\export\Export.js
ERROR [BundledSource] Error was: SyntaxError: unknown: Support for the experimental syntax 'dynamicImport' isn't currently enabled (68:25):

  66 |             switch (_a.label) {
  67 |                 case 0: return [4 /*yield*/, Promise.all([
> 68 |                         import(/* webpackChunkName: "pdfmake" */ "pdfmake/build/pdfmake.js"),
     |                         ^
  69 |                         import(/* webpackChunkName: "pdfmake" */ "../../pdfmake/vfs_fonts")
  70 |                     ])];
  71 |                 case 1:

Add @babel/plugin-syntax-dynamic-import (https://git.io/vb4Sv) to the 'plugins' section of your Babel config to enable parsing.
ERROR [Bundler] Failed to do transforms

• What is the expected behavior?
  modules with dynamic imports should succeed

• What is the motivation / use case for changing the behavior?
  Would like the ability to use amcharts4 as a module instead of just imported script. I attempted to add the @babel/plugin-syntax-dynamic-import to the cli in the only location I found babel plugins being specified in lib/build/amodro-trace/read/es.js to no avail. Where can I import this plugin for use? or does the systemjs bundler not even use babel? I know the code piece I posted says webpack, but I'm using the SystemJS bundler.

Thanks,

Ben

[Chunpeng Huo]

cli-bundler doesn't support dynamic import for now mainly because esprima has not released the feature jquery/esprima#1728. (Beside the babel thing to transpile esm module, cli-bundler needs to use esprima to analysis deps too)

The amcharts4 code looks assume it's consumed in webpack app too. If you move to webpack, beware the dynamic import has some issue on latest webpack https://www.amcharts.com/docs/v4/getting-started/integrations/using-webpack/

[Chunpeng Huo]

If you want to avoid webpack, there is the WIP successor of cli-bundler, called dumber bundler I am working on. It's stable enough I am running all my production apps with it. The bad part is the doc is unfinished.

The new bundler solved various shortages (including dynamic import()) of cli-bundler due to architecture issue.

If you want to have a look, you can create a new app with npx makes dumberjs (just run the command, no tool installation required).

Here is a demo app of aurelia+amcharts4+dumber, created by the above command.
https://github.com/3cp/demo-aurelia-amcharts4-dumber

The amcharts4 package has some issue on its source map files, but that doesn't stop anything.

[ben]

Thanks for the explanation. I prefer to stay away from webpack. I just do not like it from my experience with it using Angular. For now I can just import the am4charts globally in my index.html and all works fine, just no intellisense for typescript.

[kanhaiyaSalez]

Hi Guys use below steps will solve the issues.

npm install --save acorn@6.1.1
npm dedupe