Unable to compile using esnext release with Angular

[jpduckwo]

Hi there, using Angular 11, if you import from the esnext module the application won't compile and fails on the nullish coalescing operator "??" used in the code.

import { DataSet } from 'vis-data/esnext';
import { Edge, Network, Node, Options } from 'vis-network/esnext';

Compile error

Error: ./node_modules/vis-data/esnext/esm/vis-data.js 1239:29
Module parse failed: Unexpected token (1239:29)
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
 * ./node_modules/@ngtools/webpack/src/ivy/index.js
You may need an additional loader to handle the result of these loaders.
|             if (id != null) {
|                 // a single item
>                 return item ?? null;
|             }
|             else {

Error: ./node_modules/vis-network/esnext/esm/vis-network.js 5236:41
Module parse failed: Unexpected token (5236:41)
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
 * ./node_modules/@ngtools/webpack/src/ivy/index.js
You may need an additional loader to handle the result of these loaders.
|       this.labelModule.getTextSize(ctx, selected, hover);
|       const size = 2 * values.size;
>       this.width = this.customSizeWidth ?? size;
|       this.height = this.customSizeHeight ?? size;
|       this.radius = 0.5 * this.width;

My tsconfig... I have also tried to use module: "esnext" and that still throws an error

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ],
    "resolveJsonModule": true,
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false
  }
}

Versions...

    "vis-data": "^7.1.2",
    "vis-network": "^9.0.4",
    "vis-util": "^5.0.2",

We were using the standalone release before, but we have issues with the following code in there because we use a CSP which totally fails with this... I read that to get around this we need to use the esnext version to remove the compatibility of older browsers we don't need. Just including this for extra info...

    regeneratorRuntime = runtime;
  } catch (accidentalStrictMode) {
    // This module should not be running in strict mode, so the above
    // assignment should always work unless something is misconfigured. Just
    // in case runtime.js accidentally runs in strict mode, we can escape
    // strict mode using a global Function call. This could conceivably fail
    // if a Content Security Policy forbids using Function, but in that case
    // the proper solution is to fix the accidental strict mode problem. If
    // you've misconfigured your bundler to force strict mode and applied a
    // CSP to forbid Function, and you're not willing to fix either of those
    // problems, please detail your unique predicament in a GitHub issue.
    Function("r", "regeneratorRuntime = r")(runtime);
  }

[ur-gh]

HI @jpduckwo Were you able to resolve this issue of ?? in vis-js timeline package? I am facing similar issue when using with react? Thanks for your thoughts in advance!

[jpduckwo]

Unfortunately not :( Please let me know if you have any breakthrough

[ur-gh]

@jpduckwo will do! So did you end up using any work around? How did you compile?

[jpduckwo]

We have to leave the target to es5 and then import as follows

import { Edge, Network, Node, Options } from 'vis-network/peer';

...it compiles. However when we set a higher target it compiles but fails to load at runtime. I was hoping the esnext module was going to help us use a higher target and allow it work still...

[ur-gh]

Ok, thanks. And is your workaround specific to Angular? Where is this target located? Using react here and I have target in tsconfig.json..

[jpduckwo]

I don’t think it would be Angular specific, yes the target in tsconfig

"target": "es5", "module": "es2020", "lib": [ "es2018", "dom" ],

[ur-gh]

Thanks for confirming..

[ur-gh]

ok, makes sense. Thx again

[mojoaxel]

The easiest way to solve this is to switch to the peer build:

import { DataSet } from 'vis-data/peer';
import { Edge, Network, Node, Options } from 'vis-network/peer';