vis-network: Error with Angular 8 - 'allowSyntheticDefaultImports' flag

I just updated from vis to vis-network (I only need vis-network since I only use graph in my app) while updating to Angular 8. When I try and compile the app, I get an error:

This module can only be referenced with ECMAScript imports/exports by turning on the ‘allowSyntheticDefaultImports’ flag and referencing its default export.

in …/node_modules/vis-network/dist/types/index.d.ts:18:25. Complete error:

ERROR in …/node_modules/vis-network/dist/types/index.d.ts:18:25 - error TS2497: This module can only be referenced with ECMAScript imports/exports by turning on the ‘allowSyntheticDefaultImports’ flag and referencing its default export.

18 import * as moment from ‘./module/moment’;

…/node_modules/vis-network/dist/types/module/moment.d.ts:1:8 - error TS1259: Module ‘“%LOCATION%/angular/node_modules/moment/moment”’ can only be default-imported using the ‘allowSyntheticDefaultImports’ flag

1 import moment from ‘moment’

…/node_modules/moment/moment.d.ts:736:1 736 export = moment;

This module is declared with using ‘export =’, and can only be used with a default import when using the ‘allowSyntheticDefaultImports’ flag.

vis-network version: 5.2.1 Browser: Chrome 76.0.3809.100, Windows 10

My tsconfig.json:

"downlevelIteration": true,
"outDir": "./dist/out-tsc",
"baseUrl": "src",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es2015",
"typeRoots": [
    "node_modules/@types"
],
"lib": [
    "es2016",
    "dom"
],
"paths": {
    "core-js/es7/reflect": ["../node_modules/core-js/proposals/reflect-metadata"],
    "core-js/es6/*": ["../node_modules/core-js/es/*"],
    "core-js/es7/*": ["../node_modules/core-js/es/*"]
}

My package.json (omitted Angular stuff):

--- Angular stuff 8.2.2
"core-js": "3.2.1",
"file-saver": "2.0.2",
"ng2-pdf-viewer": "5.3.3",
"ngx-moment": "3.4.0",
"node-sass": "4.12.0",
"numbro": "2.1.2",
"rxjs": "6.5.2",
"typescript": "3.5.3",
"vis-network": "5.2.1",
"web-animations-js": "2.3.2",
"xlsx": "0.15.0",
"zone.js": "0.9.1"

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 6
Comments: 17 (7 by maintainers)

Commits related to this issue

visjs-network#68: hidden edge bug (#29) * Fixed unnecessary reset with hidden edge * fix #67 * fix #67 * chore: move hidden_edge_test to examples folder — committed to luiseduardo123/vis-network by mojoaxel 5 years ago

Most upvoted comments

you have to add allowSyntheticDefaultImports “true” in the tsconfig.json like tis "compilerOptions": { "allowSyntheticDefaultImports":true, } it gives me the solution

+81

hassan-kassim on Mar 12, 2020

This should help:

try adding “allowSyntheticDefaultImports”: true in compilerOptions in your tsconfig.json file and then use the syntax

via https://github.com/moment/moment/issues/4397

Or try setting the esModuleInterop flag to true.

With flag esModuleInterop we can import CommonJS modules in compliance with es6 modules spec

via https://stackoverflow.com/a/56348146/722162

+58

mojoaxel on Aug 19, 2019

Can the es6 export/import syntax be used in the moment type module file? @Thomaash

import * as moment from 'moment';
export default moment;

+29

JKostov on Sep 3, 2019

This helped us:

Create some file moment.constant.ts and put this inside:

import * as moment_ from 'moment';
export const moment = moment_;

And then you can use through your app.

import { moment } from 'moment.constant';

slavede on Jun 15, 2021

Ok, so after testing I can confirm that adding any of allowSyntheticDefaultImports or esModuleInterop to true works. I figured any of those would work, but I didn’t want to add them because of moment (which I kinda don’t care about)… I guess we can wait a bit more and see if someone has a different approach, if not then I will close this issue since this fixes it…

MiselKING on Aug 20, 2019

allowSyntheticDefaultImports

Its works.

pauvel on Apr 26, 2021