Strange error throw: "ERROR TypeError: defaults$2 is not a constructor" #832

ghost · 2018-10-14T12:12:16Z

PLEASE MAKE SURE THAT:

you searched similar issues online (9/10 issues in this repo are solved by googling, so please...do it)
you provide an online demo I can see without having to replicate your environment
you help me by debugging your issue, and if you can't, do go on filling out this form

I'm submitting a ... (check one with "x")

[x ] bug report => search github for a similar issue or PR before submitting
[ ] support request/question

Notice: feature requests will be ignored, submit a PR if you'd like

Current behavior
I have tried all the following

Followed the installation instructions for current version (1.9.8) and the previous version (1.9.7)
Upgraded from Angular 5.2 to 6.1.9
Deleted node_modules and reinstalled from scratch

However I get the following error every time:

ERROR TypeError: defaults$2 is not a constructor
    at new TagInputComponent (ngx-chips.js:1458)
    at createClass (core.js:11729)
    at createDirectiveInstance (core.js:11559)
    at createViewNodes (core.js:13100)
    at createEmbeddedView (core.js:12959)
    at callWithDebugContext (core.js:14460)
    at Object.debugCreateEmbeddedView [as createEmbeddedView] (core.js:13740)
    at TemplateRef_.createEmbeddedView (core.js:11064)
    at ViewContainerRef_.createEmbeddedView (core.js:10845)
    at NgIf._updateView (common.js:3878)

With line 1458 looking like:

this.separatorKeys = new defaults$2().separatorKeys;

Expected behavior
I would expect no error and the component to render. My assumption is either a version clash or I am not initialising the library properly.

Minimal reproduction of the problem with instructions (if applicable)

What do you use to build your app?. Please specify the version
Angular CLI, output from np --version

Angular CLI: 6.2.5
Node: 10.11.0
OS: win32 x64
Angular: 6.1.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.8.5
@angular-devkit/build-angular 0.8.5
@angular-devkit/build-optimizer 0.8.5
@angular-devkit/build-webpack 0.8.5
@angular-devkit/core 0.8.4
@angular-devkit/schematics 0.8.5
@angular/cdk 6.4.7
@angular/cli 6.2.5
@angular/material 6.4.7
@ngtools/webpack 6.2.5
@schematics/angular 0.8.5
@schematics/update 0.8.5
rxjs 6.3.3
typescript 2.9.2
webpack 4.20.2

Angular version:
6.1.9

ngx-chips version:
1.9.8 and 1.9.7

The text was updated successfully, but these errors were encountered:

Gbuomprisco · 2018-10-14T13:10:07Z

Hi, this seems hard to reproduce. Can you compare your steps with the app provided in the demo on stack blitz or the one in the repo?

ghost · 2018-10-14T21:16:33Z

I just compared both package.json and app.module from StackBlitz and it looks the be the same.

app.module:

import { TagInputModule } from 'ngx-chips';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // this is needed!
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';

import { SimplemdeModule } from 'ng2-simplemde';
import { NgxMdModule } from 'ngx-md';
import { SortablejsModule } from 'angular-sortablejs/dist';
import { PdfViewerModule } from 'ng2-pdf-viewer';
import { ContextMenuModule } from 'ngx-contextmenu';

import { AuthorisationGuard } from '../../shared/guards/AuthorisationGuard';

/* snip app specific imports */

const moduleRoutes: Routes = [
  { path: 'syllabi', component: GradeHomeComponent, canActivate: [AuthorisationGuard] },
  { path: 'syllabi/sorting', component: SortingHomeComponent, canActivate: [AuthorisationGuard] },
];

@NgModule({
  // Internal components
  declarations: [
    /* snip app specific declarations */
  ],
  imports: [
    BrowserAnimationsModule
    , FormsModule
    , ReactiveFormsModule
    , TagInputModule
    , FormsModule
    , CommonModule
    , RouterModule.forChild(moduleRoutes)
    , NgxMdModule.forRoot()
    , SimplemdeModule
    , SharedModule
    , SortablejsModule
    , PdfViewerModule
    , ContextMenuModule.forRoot()
  ],
  providers: [
    AuthorisationGuard
    /* snip app specific providers */
  ]
})

export class SyllabiModule { }

package.json:

{
  "name": "website",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "deprecated: test": "ng test",
    "test": "jest",
    "test:watch": "jest --watch",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build:demo": "ng build --configuration=demo",
    "build:dev": "ng build --configuration=dev"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/core": "0.8.4",
    "@angular/animations": "^6.1.9",
    "@angular/cdk": "^6.4.7",
    "@angular/common": "6.1.9",
    "@angular/compiler": "6.1.9",
    "@angular/core": "6.1.9",
    "@angular/forms": "6.1.9",
    "@angular/http": "6.1.9",
    "@angular/material": "^6.4.7",
    "@angular/platform-browser": "6.1.9",
    "@angular/platform-browser-dynamic": "6.1.9",
    "@angular/router": "6.1.9",
    "@auth0/angular-jwt": "^2.0.0",
    "angular-confirmation-popover": "^4.2.0",
    "angular-sortablejs": "^2.6.0",
    "bootstrap": "^3.3.7",
    "core-js": "^2.5.4",
    "file-saver": "^2.0.0-rc.3",
    "jquery": "^3.2.1",
    "lodash": "^4.17.4",
    "ng2-pdf-viewer": "^5.1.2",
    "ng2-simplemde": "^2.0.2",
    "ngx-bootstrap": "^3.0.1",
    "ngx-chips": "^1.9.7",
    "ngx-contextmenu": "^5.0.3",
    "ngx-md": "^6.0.9",
    "redux": "^3.7.2",
    "rxjs": "^6.3.3",
    "sortablejs": "^1.7.0",
    "typescript-collections": "^1.3.2",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.8.0",
    "@angular/cli": "~6.2.4",
    "@angular/compiler-cli": "6.1.9",
    "@angular/language-service": "6.1.9",
    "@types/file-saver": "^1.3.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/jest": "^23.1.1",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.3.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "jest": "^23.1.0",
    "jest-preset-angular": "^5.2.2",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~2.9.2",
    "webpack": "^4.20.2"
  },
  "jest": {
    "preset": "jest-preset-angular",
    "setupTestFrameworkScriptFile": "<rootDir>/src/setupJest.ts"
  }
}

Possible of note is that I'm using the latest version of Angular (although I had the same error in 5.2 which prompted the upgrade to v6), and the StackBlitz example is in v5. I should also be able to provide any other outputs/code files that might be useful?

alexxtaurus · 2018-10-17T14:57:40Z

I have the same issue. To reproduce add: "target"="es6" to the tsconfig.app.json

Gbuomprisco · 2018-10-17T15:02:11Z

if you are targeting browsers, do use es5

ghost · 2018-10-19T03:17:28Z

Thanks @alexxtaurus , although I seem to have had target=es5 already:
tsconfig:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es6",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "module": "es2015",
    "baseUrl": "./"
  }
}

and tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

Gbuomprisco · 2018-10-19T06:56:44Z

I can see target": "es6" in your config

ghost · 2018-10-20T22:27:53Z

@Gbuomprisco True, I also changed it to es5 and still got the same error.

CH4V3Z · 2018-10-25T02:18:07Z

Hello, this project is a simple copy but without the problem, works for me on "@angular/core": "6.1.10".

ghost · 2018-11-06T03:58:38Z

Finally tracked whatever the source issue was to an incompatible configuration in tsconfig.json.

For reference, in case anyone else experiences the same error, this is my complete tsconfig.json file. **Note ** although I upgraded to Angular 7 and ngx-chips 2.0.0.beta0, the only fix was the below:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

Fixes TypeError "defaults$2 is not a constructor" Calling the function directly instead of with `new` (which doesn't work in ES6 mode) returns the exact same structure in both modes. Closes #832 Closes #744 Closes #634

webcat12345 · 2019-05-29T02:53:34Z

having same error after upgrading to angular 8, chips version is - "ngx-chips": "^2.0.0-beta.0", resolved issue with this - "target": "es5",

ashish-sharma91 · 2019-05-31T04:20:56Z

I am also having the same issue after Upgrading Angular 8, "target": "es5", doesnt solve the issue in my case.

milons · 2019-06-07T21:34:31Z

Same problem here.
When upgraded to Angular 8, there is a problem as described.
Do you have any solution?

atifsaddique211f · 2019-06-08T15:51:34Z

I also have the same issue after upgrading to Angular 8

atifsaddique211f · 2019-06-08T16:26:51Z

Changing to "target": "es5" in tsconfig.json worked for me.

Fixes TypeError "defaults$2 is not a constructor" Calling the function directly instead of with `new` (which doesn't work in ES6 mode) returns the exact same structure in both modes. Closes Gbuomprisco#832 Closes Gbuomprisco#744 Closes Gbuomprisco#634

Gbuomprisco closed this as completed Oct 17, 2018

This was referenced Mar 12, 2019

Fix incompatibility issue with ES6 #863

Merged

Fix incompatibility issue with ES6 tronghiant/ngx-chips#14

Merged

VijaySutariaJCD mentioned this issue Jan 8, 2021

Error in production build #976

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Strange error throw: "ERROR TypeError: defaults$2 is not a constructor" #832

Strange error throw: "ERROR TypeError: defaults$2 is not a constructor" #832

ghost commented Oct 14, 2018

Gbuomprisco commented Oct 14, 2018

ghost commented Oct 14, 2018 •

edited by ghost

Loading

alexxtaurus commented Oct 17, 2018

Gbuomprisco commented Oct 17, 2018

ghost commented Oct 19, 2018 •

edited by ghost

Loading

Gbuomprisco commented Oct 19, 2018

ghost commented Oct 20, 2018

CH4V3Z commented Oct 25, 2018 •

edited

Loading

ghost commented Nov 6, 2018

webcat12345 commented May 29, 2019 •

edited

Loading

ashish-sharma91 commented May 31, 2019

milons commented Jun 7, 2019

atifsaddique211f commented Jun 8, 2019

atifsaddique211f commented Jun 8, 2019

Strange error throw: "ERROR TypeError: defaults$2 is not a constructor" #832

Strange error throw: "ERROR TypeError: defaults$2 is not a constructor" #832

Comments

ghost commented Oct 14, 2018

Package Version

Gbuomprisco commented Oct 14, 2018

ghost commented Oct 14, 2018 • edited by ghost Loading

alexxtaurus commented Oct 17, 2018

Gbuomprisco commented Oct 17, 2018

ghost commented Oct 19, 2018 • edited by ghost Loading

Gbuomprisco commented Oct 19, 2018

ghost commented Oct 20, 2018

CH4V3Z commented Oct 25, 2018 • edited Loading

ghost commented Nov 6, 2018

webcat12345 commented May 29, 2019 • edited Loading

ashish-sharma91 commented May 31, 2019

milons commented Jun 7, 2019

atifsaddique211f commented Jun 8, 2019

atifsaddique211f commented Jun 8, 2019

ghost commented Oct 14, 2018 •

edited by ghost

Loading

ghost commented Oct 19, 2018 •

edited by ghost

Loading

CH4V3Z commented Oct 25, 2018 •

edited

Loading

webcat12345 commented May 29, 2019 •

edited

Loading